{% extends 'index.html' %} {% load static i18n %} {% load i18n %}
{% load widget_tweaks %} {% block content %} {% load basefilters %}
{% include 'filter_tags.html' %}
<style>
  .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;
  }
  .select2-container .select2-selection.select2-selection--multiple {
    padding: 5px !important;
    max-height: 70px !important;
    overflow: hidden;
    overflow-y: scroll;
  }
  .search-highlight {
    background-color: rgba(255, 68, 0, 0.076);
  }
  #enlargeImageContainer {
    position: absolute;
    left: -300px;
    top: 100px;
    height: 200px;
    width: 200px;
  }
</style>
{% include "okr/emp_objective/emp_objective_nav.html" %}
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
  <div class="oh-wrapper" style="margin-top: 5px">
    <div class="oh-card">
      <div class="oh-helpdesk__header">
        <div class="d-flex justify-content-between align-items-center">
          <p class="oh-helpdesk__header-title">{{objective}}</p>
          <span class="helpdesk__card-value me-3">
            <div class="oh-btn-group">
              {% if perms.pms.change_objective %}
              <a
                onclick="event.preventDefault();event.stopPropagation()"
                data-toggle="oh-modal-toggle"
                data-target="#objectCreateModal"
                hx-get="{% url 'objective-update' objective.id %}"
                hx-target="#objectCreateModalTarget"
                class="oh-btn oh-btn--light-bkg w-100"
                title="{% trans 'Edit' %}"
                ><ion-icon name="create-outline"></ion-icon
              ></a>
              {% endif %} {% if perms.pms.add_employeeobjective %}
              <a
                onclick="event.preventDefault();event.stopPropagation()"
                hx-get="{% url 'add-assignees' objective.id %}"
                hx-target="#objectDetailsModalTarget"
                hx-swap="innerHTML"
                data-toggle="oh-modal-toggle"
                data-target="#objectDetailsModal"
                class="oh-btn oh-btn--light-bkg w-100"
                title="Add assignees"
                ><ion-icon name="add-outline"></ion-icon
              ></a>
              {% endif %}
            </div>
          </span>
        </div>

        <ul class="helpdesk__card-items">
          <li class="helpdesk__card-item">
            <span class="helpdesk__card-label">{% trans "Managers:" %}</span>
            <span class="helpdesk__card-value" name="" id="">
              <div class="d-flex justify-content-between custom-scroll">
                <div class="avatars" id="avatarsContainer">
                  {% for manager in objective.managers.all %}
                  <a
                    href="{% url 'employee-view-individual' manager.id %}"
                    class="avatars__item"
                    title="{{manager}}"
                    ><img class="avatar" src="{{manager.get_avatar}}" alt=""
                  /></a>
                  {% endfor %}
                </div>
              </div>
            </span>
          </li>
          <li class="helpdesk__card-item">
            <span class="helpdesk__card-label">{% trans "Duration:" %}</span>
            <span class="helpdesk__card-value" name="" id=""
              >{{objective.duration}}
              {{objective.get_duration_unit_display}}</span
            >
          </li>
          <li class="helpdesk__card-item">
            <span class="helpdesk__card-label">{% trans "Description:" %}</span>
            <span class="helpdesk__card-value" name="" id=""
              >{{objective.description}}</span
            >
          </li>
        </ul>
      </div>
    </div>

    {% if objective.employee_objective.all %}
    <div
      class="oh-card"
      id="emp_objective_card"
      hx-get="{% url 'emp-objective-search' objective.id %}?{{request.GET.urlencode}}"
      hx-trigger="load"
    ></div>
    {% else %}
    <!-- start of empty page-->
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      "
    >
      <img
        style="
          display: block;
          width: 15%;
          margin: 20px auto;
          filter: opacity(0.5);
        "
        src="{% static 'static/images/ui/target.png' %}"
        class=""
        alt="Page not found. 404."
      />
      <h5 class="oh-404__subtitle">
        {% trans "There are no assignees for this objective at the moment." %}
      </h5>
    </div>
    <!-- end of empty page-->
    {% endif %}
  </div>

  <!-- Modals -->

  <div
    class="oh-modal"
    id="objectivesModal"
    role="dialog"
    aria-labelledby="objectivesModal"
    aria-hidden="true"
  >
    <div class="oh-modal__dialog" id="objectivesTarget"></div>
  </div>

  <div class="oh-activity-sidebar" id="OKRactivitySidebar">
    <div class="oh-activity-sidebar__body" id="activityContainer"></div>
  </div>
  <button id="keyresultDataButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=target_value" hx-target="#empKeyrsultForm #id_target_value" hx-swap="outerHTML" hidden></button>
  <button id="endDateChangeButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=end_date" hx-target="#empKeyrsultForm #id_end_date" hx-swap="outerHTML" hidden></button>
  <button id="changeObjStatusButton" hx-get="{% url 'change-employee-objective-status' %}" hx-target="" hidden></button>
  <script>
    $(document).ready(function () {
      $(".oh-accordion-meta__header").click(function () {
        var target = $(this).find(".oh-accordion-meta__body");
        $(this).toggleClass("oh-accordion-meta__header--show");
        $(target).toggleClass("d-none");
      });
    });

    function enlargeImage(src) {
      var enlargeImageContainer = $("#enlargeImageContainer");
      enlargeImageContainer.empty();
      style =
        "width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white";
      var enlargedImage = $("<iframe>").attr({ src: src, style: style });
      var name = $("<span>").text(src.split("/").pop().replace(/_/g, " "));
      enlargeImageContainer.append(enlargedImage);
      enlargeImageContainer.append(name);
      setTimeout(function () {
        enlargeImageContainer.show();

        const iframe = document.querySelector("iframe").contentWindow;
        var iframe_document = iframe.document;
        iframe_image = iframe_document.getElementsByTagName("img")[0];
        $(iframe_image).attr("style", "width:100%; height:100%;");
      }, 100);
    }

    function hideEnlargeImage() {
      var enlargeImageContainer = $("#enlargeImageContainer");
      enlargeImageContainer.empty();
    }
    //create key result dynamically
    function keyResultChange(element) {
      var selectedValue = $(element).val();
      if (selectedValue !== null && selectedValue !== '') {
        if (selectedValue.includes("create_new_key_result")) {
          var parentForm = $(element).closest("form");
          var view = parentForm.serialize();
          // Get the value of the 'data-url' attribute correctly
          var dataUrl = $('#empKeyrsultForm').attr('data-url');
          // Corrected attribute assignment with proper JSON format
          $('#dynamicKeyResult').attr("hx-vals", `{"data":"${view}", "dataUrl":"${dataUrl}"}`);
          dynamicKeyResult.click();
          $(element).val('').change();
        } else {
          // selectedValue is not null or empty, this will work
          $('#keyresultDataButton').click();
          $('#endDateChangeButton').click()
        }
      }
    }
    function startDateChange(){
      var keyResultId = $('#id_key_result_id').val()
      if (keyResultId !== null && keyResultId !== '' ){
        $('#endDateChangeButton').click()
      }
    }


    //change employee objective status
    function changeObjectiveStatus(element){
      var status = $(element).val();
      var empObjId = $(element).attr('data-empObj');
      $('#changeObjStatusButton').attr("hx-vals", `{"empObjId":"${empObjId}", "status":"${status}"}`).click();
    }
    function progress(element) {
      var currentValue = $(element).val();
      keyResultTable = $(element).closest(".oh-sticky-table__tbody");
      keyResultRow = $(element).closest(".oh-sticky-table__tr");
      empKeyResultId = keyResultRow.attr("data-kr-id");
      var targetValue = keyResultRow.find("[data-value]").attr("data-value");

      // Extract only the numeric part using a regular expression
      var numericValue = parseFloat(targetValue.replace(/[^\d.]/g, ""));
      var prgressPercentage = parseInt((currentValue * 100) / numericValue);
      // Ensure totalProgress doesn't exceed 100
      if (prgressPercentage > 100) {
        prgressPercentage = 100;
        Swal.fire({
          icon: "error",
          title: "Oops...",
          text: "Current Value cannot exceed target value!",
          timer: 3000, // Display the alert for 3 seconds
          timerProgressBar: true, // Show the progress bar
          showConfirmButton: false, // Hide the "OK" button
        });
      } else {
        $.ajax({
          type: "post",
          url: "{% url 'key-result-current-value-update' %}",
          data: {
            csrfmiddlewaretoken: getCookie("csrftoken"),
            current_value: currentValue,
            emp_key_result_id: empKeyResultId,
          },
          success: function (response) {
            if (response.type != "error") {
              keyResultRow.find(".p-percentage").text(prgressPercentage + "%");

              // Iterate over each span and get its text content
              var total_percentage = 0;
              var total_kr = 0;
              keyResultTable.find(".p-percentage").each(function () {
                strPercentage = $(this).text();
                numPercentage = parseFloat(
                  strPercentage.replace(/[^\d.]/g, "")
                );
                total_percentage += numPercentage;
                total_kr += 1;
              });
              totalProgress = parseInt(total_percentage / total_kr);
              // Ensure totalProgress doesn't exceed 100
              if (totalProgress > 100) {
                totalProgress = 100;
              }
              objectiveProgressContainer = $(element)
                .closest(".oh-accordion-meta__item")
                .find(".progress_bar_objective");
              objectiveProgressContainer.html(
                '<div class="oh-progress" role="progressbar">' +
                  '<div class="oh-progress__bar oh-progress__bar--secondary" style="width: calc(' +
                  totalProgress +
                  '%)"></div>' +
                  "</div>" +
                  '<div class="oh-progress-container__percentage" style="width:50px" name= "key_result_percentage">' +
                  totalProgress +
                  " %</div>"
              );
            }
          },
        });
      }
    }
    var timer;
    function delayedProgress(element) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        progress(element);
      }, 300);
    }
    $(document).on("click", function (event) {
      if (!$(event.target).closest("#enlargeImageContainer").length) {
        hideEnlargeImage();
      }
    });
  </script>
  {% endblock %}
</main>