{% extends 'index.html' %} {% load i18n %} {% load yes_no %} {% load static %} {% block content %} {% load recruitmentfilters %}
<script>
  function submitForm(elem) {
    $(elem).siblings(".add_more_submit").click();
  }
  function enlargeImage(src, $element) {
    var enlargeDocContainer = $element
      .parents()
      .closest("li")
      .find("#enlargeDocContainer");
    enlargeDocContainer.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, " "));
    enlargeDocContainer.append(enlargedImage);
    enlargeDocContainer.append(name);
    setTimeout(function () {
      enlargeDocContainer.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 enlargeDocContainer = $(".enlargeDocContainer");
    enlargeDocContainer.empty();
  }

  $(document).on("click", function (event) {
    if (!$(event.target).closest("#enlargeDocContainer").length) {
      hideEnlargeImage();
    }
  });
</script>
<style>
  .enlarge-image-container {
    display: none;
    position: fixed;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 50%;
    z-index: 9999;
  }
  .enlarge-image-container img{
    max-width: 100%;
    height: auto;
    border-radius: 5%;
  }
  .oh-rate:not(:checked)>label {
    font-size:40px;
  }
  .star {
    font-size:20px !important;
  }
  .ul {
    margin:0;
  }
  body {
    background-color: #f9f9f9 !important;
  }
</style>

<div id="showImageContainer"></div>

<div class="oh-wrapper" id="section">
  <div class="oh-card mt-4 mb-5">
    <div class="d-flex flex-row-reverse">
      {% if perms.recruitment.change_candidate %}
        <div class='d-flex float-end ms-4'>
          {% if not candidate.email in emp_list and not candidate.start_onboard %}
            <form action="{% url 'candidate-conversion' candidate.id %}" style="color: inherit;text-decoration: none;"
              onsubmit="return confirm('{% trans "Are you sure you want to convert this candidate into an employee?" %}')"
              >
              {% csrf_token %}
              <button type='submit' class="oh-btn oh-btn--success"style="border-radius:18px; "> {% trans "Convert To Employee" %}</button>
            </form>
          {% endif %}
        </div>
      {% endif %}

      <a href="{% url 'rec-candidate-update' candidate.id %}" class="mt-1">
        <img src="/static/images/ui/edit_btn.png" style="width: 25px; height: auto;" title="{% trans 'Edit' %}">      </a>

        {% if next != None %}
				<a
					href="{% url 'candidate-view-individual' next %}" title='{% trans "Next Candidate" %}' style="color:hsl(8, 77%, 56%);" class="ms-1 me-3 fw-bold"
					>
					<ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
				</a>
			{% else %}
				<a
					href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 me-3 fw-bold oh-btn--disabled"
					>
					<ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
				</a>
			{% endif %}

			{% if previous != None %}
				<a
					href="{% url 'candidate-view-individual' previous %}" title='{% trans "Previous Candidate" %}' style="color:hsl(8, 77%, 56%);" class="ms-1 me-2 fw-bold"
					>
					<ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
				</a>
			{% else %}
				<a
					href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 me-2 fw-bold oh-btn--disabled"
					>
					<ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
				</a>
			{% endif %}


    </div>
    <div class="row">
      <div class="col-12 col-sm-12 col-md-12 col-lg-4">
        <div class="d-flex align-items-center">
          <div class="oh-profile oh-profile--lg me-3">
            <div class="oh-profile__avatar">
              <img
                src="{{candidate.get_avatar}}"
                class="oh-profile-section__avatar preview"
                alt="Username"
                style="border-radius:10%"
                onmouseover="showImage(this)
                  $('#showImageContainer').addClass('enlarge-image-container');
                "
                onmouseout="hideshowImage()
                  $('#showImageContainer').removeClass('enlarge-image-container');
                "
              />
            </div>
            <span
              class="oh-profile__active-badge oh-profile__active-badge--secondary"
              title="Active"
            ></span>
          </div>
          <div class="oh-profile__info-container">
            <h1 class="oh-profile__info-name">{{candidate}}</h1>
            <p class="oh-profile__info-designation">
              {{candidate.job_position_id}}
            </p>
          </div>
        </div>
      </div>
      <div
        class="col-12 col-sm-12 col-md-12 col-lg-8 d-flex align-items-center justify-content-between"
      >
        <ul class="oh-profile__info-list">
          <li class="oh-profile__info-list-item">
            <span class="oh-profile__info-label">
              <ion-icon name="mail-outline"></ion-icon>
              <span>{% trans "Email" %}:</span>
            </span>
            <span class="oh-profile__info-value">{{candidate.email}}</span>
          </li>

          <li class="oh-profile__info-list-item">
            <span class="oh-profile__info-label">
              <ion-icon name="call-outline"></ion-icon>
              <span>{% trans "Phone" %}:</span>
            </span>
            <span class="oh-profile__info-value">{{candidate.mobile}}</span>
          </li>
        </ul>
        {% with request.user.employee_get.candidate_rating.all as candidate_ratings  %}
            <form >
              <div class="d-block mb-0">
                <div class="oh-rate" style="pointer-events:none;">
                  {% for i in "54321" %}
                  <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio" value="{{i}}" disabled {% if candidate.candidate_rating.all|avg_rating:candidate == i %} checked {% endif %} />
                  <label for="star{{i}}{{cand.id}}" >5 {% trans "Stars" %}</label>
                  {% endfor %}
                </div>
                <span id="rating-radio-error"></span>
              </div>
            </form>
          {% endwith %}
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-12 col lg-12">
        <ul
          class="oh-general__tabs oh-general__tabs--border oh-general__tabs--profile oh-general__tabs--no-grow oh-profile-section__tab mt-5"
        >
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link oh-general__tab-link--active"
              data-action="general-tab"
              data-target="#personal"
              >{% trans "About" %}</a
            >
          </li>
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link"
              data-action="general-tab"
              data-target="#resume"
              >{% trans "Resume" %}</a
            >
          </li>
          <li class="oh-general__tab">
            <a
            href="#"
            class="oh-general__tab-link"
            data-action="general-tab"
            data-target="#survey"
            >{% trans "Survey" %}</a
            >
          </li>
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link"
              data-action="general-tab"
              data-target="#note"
              >{% trans "Notes" %}</a
            >
          </li>
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link"
              data-action="general-tab"
              data-target="#history"
              >{% trans "History" %}</a
            >
          </li>
          {% if request.user|stage_manages:candidate.recruitment_id or perms.recruitment.view_candidate %}
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link"
              data-action="general-tab"
              data-target="#rating"
              >{% trans "Rating" %}</a
            >
          </li>
          {% endif %}
          {% if candidate.hired %}
          <li class="oh-general__tab">
            <a
            href="#"
            class="oh-general__tab-link"
            data-action="general-tab"
            data-target="#onboarding"
            >{% trans "Onboarding" %}</a
            >
          </li>
          {% endif %}
          <li class="oh-general__tab">
            <span
            hx-get="{% url 'get-mail-log-rec' %}?candidate_id={{candidate.id}}"
            hx-target="#maillog"
            hx-trigger="load"
            class="oh-general__tab-link"
            data-action="general-tab"
            data-target="#maillog"
            style="cursor: pointer;"
            >{% trans "Mail Log" %}</span
            >
          </li>
          <li class="oh-general__tab">
            <a
              href="#"
              class="oh-general__tab-link"
              data-action="general-tab"
              data-target="#interview"
              >{% trans "Scheduled Interviews" %}</a
            >
          </li>
        </ul>

        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4"
          id="personal"
        >
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-4">
              <div class="oh-card oh-card--margin">
                <div class="oh-card__header">
                  <span class="oh-card__title oh-card__title--sm fw-bold me-2"
                    >{% trans "Personal Information" %}</span
                  >
                </div>
                <div class="oh-card__body mt-4">
                  <ul class="oh-profile__card-info-list">
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="calendar-outline"></ion-icon>
                        <span>{% trans "Date of Birth" %}</span>
                      </span>
                      <span class="oh-profile__info-value dateformat_changer"
                        >{{candidate.dob}}</span
                      >
                    </li>
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="transgender-outline"></ion-icon>
                        <span>{% trans "Gender" %}</span>
                      </span>
                      <span class="oh-profile__info-value"
                        >{{candidate.gender|capfirst}}</span
                      >
                    </li>
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="home-outline"></ion-icon>
                        <span>{% trans "Address" %}</span>
                      </span>
                      <p class="oh-profile__info-value mb-0">
                        {{candidate.address}}
                      </p>
                    </li>
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="flag-outline"></ion-icon>
                        <span>{% trans "Country" %}</span>
                      </span>
                      <span class="oh-profile__info-value">
                        {{candidate.country}}
                      </span>
                    </li>
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="compass-outline"></ion-icon>
                        <span>{% trans "State" %}</span>
                      </span>
                      <span class="oh-profile__info-value">
                        {{candidate.state}}
                      </span>
                    </li>
                    <li class="oh-profile__card-info-item">
                      <span class="oh-profile__info-label mb-1">
                        <ion-icon name="brush-outline"></ion-icon>
                        <span>{% trans "Portfolio" %}</span>
                      </span>
                      <span class="oh-profile__info-value">
                        {{candidate.portfolio}}
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-8">
              <div class="oh-card oh-card--margin">
                <div class="oh-card__header">
                  <span class="oh-card__title oh-card__title--sm fw-bold me-2"
                    >{% trans "Recruitment Information" %}</span
                  >
                </div>
                <div class="oh-card__body mt-4">
                  <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                      <ul class="oh-profile__card-info-list">
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon name="construct-outline"></ion-icon>
                            <span>{% trans "Recruitment" %}</span>
                          </span>
                          <span class="oh-profile__info-value"
                            >{{candidate.recruitment_id}}</span
                          >
                        </li>
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon name="briefcase-outline"></ion-icon>

                            <span>{% trans "Department" %}</span>
                          </span>
                          <span class="oh-profile__info-value"
                            >{{candidate.job_position_id.department_id}}</span
                          >
                        </li>
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon
                              name="file-tray-stacked-outline"
                            ></ion-icon>
                            <span>{% trans "Source" %}</span>
                          </span>
                          {% if candidate.get_source_display != None %}
                            <span class="oh-profile__info-value"
                              >{{candidate.get_source_display}}</span
                            >
                          {% endif %}
                        </li>
                      </ul>
                    </div>

                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                      <ul class="oh-profile__card-info-list">
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon
                              name="file-tray-stacked-outline"
                            ></ion-icon>
                            <span>{% trans "Current Stage" %}</span>
                          </span>
                          <span class="oh-profile__info-value"
                            >{{candidate.stage_id}}</span
                          >
                        </li>
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon name="briefcase-outline"></ion-icon>
                            <span>{% trans "Job Position" %}</span>
                          </span>
                          <span class="oh-profile__info-value"
                            >{{candidate.job_position_id}}</span
                          >
                        </li>
                        <li class="oh-profile__card-info-item">
                          <span class="oh-profile__info-label mb-1">
                            <ion-icon name="people-outline"></ion-icon>
                            <span>{% trans "Referral" %}</span>
                          </span>
                          <span class="oh-profile__info-value"
                            >{{candidate.referral}}</span
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="note"
        >
          <!-- #2 -->
          {% load i18n static %}
          <style>
              #enlargeDocContainer {
                  position: absolute;
                  left: 400px;
                  top: 300px;
                  height: 200px;
                  width: 400px;
              }
          </style>

          {% if candidate.stagenote_set.all %}
            <form method="post"
            hx-target="#note"
            hx-post="{% url 'add-note' candidate.id %}" id="commentForm">
            {% csrf_token %}

            <div>
                <div class="mt-4">
                  <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Notes" %}</span>
                  <input type="text" name="description" id="commentInput" class="oh-input w-100 mt-2" placeholder="Add notes">
                </div>
                  <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">
                    {% trans "Add" %}
                  </button>
                </div>

                <div class="oh-inner-sidebar-content__footer"></div>
              </form>

            <ol class="oh-activity-sidebar__qa-list" role="list">
              {% for note in candidate.stagenote_set.all %}
                <li class="oh-activity-sidebar__qa-item">
                  <span class="oh-activity-sidebar__q">{{ note.description }}
                      <span class="float-end" title="Delete" hx-get="{% url 'note-delete-individual' note.id %}" data-target="#activitySidebar" hx-swap="innerHTML" hx-target="#note">
                        <ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated" aria-label="close outline"></ion-icon></span>
                  </span>

                  <div class="d-flex mt-2 mb-2">
                    {% for file in note.stage_files.all %}
                    <a
                      href="{{ file.files.url }}"
                      rel="noopener noreferrer"
                      target="_blank"
                      ><span
                        class="oh-file-icon oh-file-icon--pdf"
                        onmouseover="enlargeImage('{{ file.files.url }}',$(this))
                        								$('#showImageContainer').addClass('enlarge-image-container');"
                        onmouseout = "hideEnlargeImage()
                        								$('#showImageContainer').removeClass('enlarge-image-container');"
                        style="width: 40px; height: 40px"
                        ><img
                          src="{% static 'images/ui/minus-icon.png' %}"
                          style="display: block; width: 50%; height: 50%"
                          hx-get='{% url "delete-individual-note-file" file.id %}'
                          hx-target="#note"
                          onclick="event.stopPropagation();event.preventDefault()" /></span
                    ></a>
                    {% endfor %}

                    <form
                      hx-post="{% url 'add-more-files-individual' note.id %}"
                      class="add-files-form"
                      hx-encoding="multipart/form-data"
                      data-target="#activitySidebar" hx-swap="innerHTML" hx-target="#note"

                    >
                      {% csrf_token %}
                      <label for="addFile_{{note.id}}" title="Add Files"
                        ><ion-icon
                          name="add-outline"
                          style="font-size: 24px"
                          role="img"
                          class="md hydrated"
                          aria-label="add outline"
                        ></ion-icon
                      ></label>
                      <input
                        type="file"
                        name="files"
                        class="d-none"
                        multiple="true"
                        id="addFile_{{note.id}}"
                        onchange="submitForm(this)"
                      />
                      <input
                        type="submit"
                        class="d-none add_more_submit"
                        value="save"
                      />
                    </form>
                  </div>
                  <span class="oh-activity-sidebar__a">
                    {% trans 'by' %}
                    <img
                      src="{{ note.note_by.get_avatar }}"
                      style="width: 1.5em; border-radius: 100%"
                    />
                    {{ note.updated_by }} @ {{note.stage_id }}
                    {% trans "stage" %}
                  </span>
                  <div style="width: 50%">
                    <div id="enlargeDocContainer" class="enlargeDocContainer"></div>
                  </div>
                </li>

              {% endfor %}
            </ol>
          {% else %}
            <form method="post"
              hx-target="#note"
              hx-post="{% url 'add-note' candidate.id %}" id="commentForm">
              {% csrf_token %}

                <div>
                  <div class="mt-4">
                    <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Notes" %}</span>
                    <input type="text" name="description" id="commentInput" class="oh-input w-100 mt-2" placeholder="Add notes">
                  </div>
                  <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">
                    {% trans "Add" %}
                  </button>
                </div>

                <div class="oh-inner-sidebar-content__footer"></div>
              </form>
              <div class='d-flex mt-5' style='margin-left:30%;'>
                <img style="width: 80px;height: 90px;" src="{% static 'images/ui/no_notes.png' %}"/>
                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No notes have been added for this candidate" %}</h5>
              </div>
          {% endif %}
        </div>

        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="interview"
        >

        {% if candidate.candidate_interview.exists %}
          <div class="mt-4 d-flex">
            <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Scheduled Interviews" %}</span>
          </div>
          <div class="d-flex" style="flex-direction: row-reverse;">
            <button type="button" hx-get='{% url "interview-schedule" candidate.id %}' title="{% trans "Schedule Interview" %}"
                  hx-target="#createTarget"
                  hx-swap="innerHTML"
                  data-target="#createModal"
                  class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
                  data-toggle="oh-modal-toggle">
                  <ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>
                  {% trans "Add" %}
            </button>
          </div>

            <ol class="oh-activity-sidebar__qa-list" role="list">
              {% for interview_schedule in candidate.candidate_interview.all %}
                <li class="oh-activity-sidebar__qa-item">
                  <span class="oh-activity-sidebar__q" style="font-size:16px;">
                    <span class="float-end" title="{% trans "Delete" %}" hx-get="{% url 'delete-interview' interview_schedule.id %}?view=false"
                          data-target="#activitySidebar"
                          hx-swap="innerHTML" hx-target="#interview">
                      <ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated"
                          aria-label="close outline"></ion-icon>
                    </span>
                    <span class="float-end" title="{% trans "Edit" %}" hx-get="{% url 'edit-interview' interview_schedule.id %}?view=false"
                          data-target="#createModal" hx-swap="innerHTML" hx-target="#createTarget"
                          data-toggle="oh-modal-toggle">
                      <ion-icon name="create-outline" style="font-size: 19px" role="img" class="md hydrated"
                          aria-label="create outline"></ion-icon>
                    </span>
                    {{forloop.counter}}.<span class="ms-1 mb-2"> {% trans "Date" %} :</span> <span class="ms-2 dateformat_changer">{{ interview_schedule.interview_date }}</span>
                    <span class="d-flex ms-3 mb-2 mt-2">{% trans "Time" %} : <span class=" ms-2 timeformat_changer">{{ interview_schedule.interview_time }}</span></span>
                    <span class="ms-3">{% trans "Interviewer" %} :</span>
                      {% for interviewer in  interview_schedule.employee_id.all %}
                        &nbsp<i id="fabIcon" style="font-size:12px;" class="material-icons">radio_button_checked</i> {{ interviewer }}
                      {% endfor %}
                      <br>
                      {% if interview_schedule.description %}
                        <span class="d-flex ms-3 mb-2 mt-2">{% trans "Description" %} : <span class=" ms-2">{{ interview_schedule.description }}</span>
                      {% endif %}
                  </span>
                  {% if interview_schedule.completed %}
                      <div class="d-flex" style="color:green;">
                          <i id="fabIcon" style="font-size:18px;" class="material-icons ms-3 mt-2">check_circle</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Completed" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" < now|date:"Y-m-d" %}
                      <div class="d-flex" style="color:red;">
                          <i id="fabIcon" style="font-size:18px" class="material-icons ms-3 mt-2">dangerous</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Expired Interview" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" > now|date:"Y-m-d" %}
                      <div class="d-flex" style="color:orange;">
                          <i id="fabIcon" title="{{interview_schedule.interview_date|timeuntil}}" style="font-size:18px;" class="material-icons ms-3 mt-2">schedule</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Upcoming Interview" %}</span>
                      </div>
                  {% elif interview_schedule.interview_date|date:"Y-m-d" == now|date:"Y-m-d" and not interview_schedule.completed %}
                      <div class="d-flex" style="color:blue;">
                          <i id="fabIcon" style="font-size:18px;" class="material-symbols-outlined ms-3 mt-2">today</i>
                          <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Today" %}</span>
                      </div>
                  {% endif %}

                </li>

              {% endfor %}
            </ol>
          {% else %}
            <div class="mt-4 d-flex">
              <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Scheduled Interviews" %}</span>
            </div>
            <div class="d-flex" style="flex-direction: row-reverse;">
              <button type="button" hx-get='{% url "interview-schedule" candidate.id %}' title="{% trans "Schedule Interview" %}"
                    hx-target="#createTarget"
                    hx-swap="innerHTML"
                    data-target="#createModal"
                    class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
                    data-toggle="oh-modal-toggle">
                    <ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>
                    {% trans "Add" %}
              </button>
            </div>
              <div class='d-flex mt-5' style='margin-left:30%;'>
                <img style="width: 80px;height: 90px;" src="{% static 'images/ui/interview.png' %}"/>
                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No interviews are scheduled for this candidate" %}</h5>
              </div>
          {% endif %}
        </div>

          <!-- start of comment modal -->
          <div
            class="oh-modal"
            id="shiftcommentModal"
            role="dialog"
            aria-labelledby="emptagModal"
            aria-hidden="true"
          >
            <div class="oh-modal__dialog" id="shiftRequestCommentForm">
            </div>
          </div>
          <!-- end of comment modal -->

          <div class="oh-modal" id="createModal" role="dialog" aria-hidden="true">
            <div class="oh-modal__dialog" style="max-width: 550px">
                <div class="oh-modal__dialog-header">
                <button onclick="$(this).closest('#createModal').removeClass('oh-modal--show');" type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
                </div>

                <div class="oh-modal__dialog-body" id="createTarget"></div>
            </div>
          </div>


          <script>
              // Get references to the input field and comment button
              const commentInput = document.getElementById('commentInput');
              const commentButton = document.getElementById('commentButton');

              // Add event listener to the input field
              commentInput.addEventListener('input', function() {
                  // Show the comment button if the input field is not empty, hide it otherwise
                  if (commentInput.value.trim() !== '') {
                      commentButton.style.display = 'inline';
                  } else {
                      commentButton.style.display = 'none';
                  }
              });
          </script>

        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="history"
        >
        {% include "candidate/history.html" %}
        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="rating"
        >
        {% include "candidate/rating_tab.html" %}
        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="maillog"
        >
        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="resume"
        >
          {% if candidate.resume %}
          <iframe
            id="iframe_pdf"
            src="/media/{{candidate.resume}}"
            style="width: 100%; height: 500px"
            frameborder="0"
          ></iframe>
          {% else %}
          <p>{% trans "This candidate does not have a resume on file." %}</p>
          {% endif %}
        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4"
          id="survey"
          >
          <!-- #3 -->
          {% if candidate.recruitmentsurveyanswer_set.all %}
            {% for surveys in candidate.recruitmentsurveyanswer_set.all %}
            <div class="oh-survey__table">
              {% for question, answer_list in surveys.answer.items %}
              {% if question != "csrfmiddlewaretoken" %}
                  <div class="oh-survey__table-row">
                    <div class="oh-survey__table-col">
                      {% if question|slice:"0:11" == "percentage_" %}
                        {{ question|slice:"11:" }}
                      {% elif question|slice:"0:7" == "rating_" %}
                        {{ question|slice:"7:" }}
                      {% elif question|slice:"0:5" == "file_" %}
                        {{ question|slice:"5:" }}
                      {% else %}
                        {{ question }}
                      {% endif %}
                    </div>
                    <div class="oh-survey__table-col">
                      {% if answer_list|length > 1 %}
                        {{ answer_list|join:", " }}
                      {% else %}
                        {% if answer_list.0 == "on" or answer_list.0 == "off"%}
                          {{ answer_list.0|on_off }}
                        {% elif question|slice:"0:11" == "percentage_" %}
                          {{ answer_list.0 }}%
                        {% elif question|slice:"0:5" == "file_" %}
                          <a href="/media/{{ answer_list.0 }}" target="_blank">{{ answer_list.0 }}</a>
                        {% elif question|slice:"0:7" == "rating_" %}
                            <div class="oh-rate">
                              <input type="radio" id="star5{{question.id}}" value="5" disabled {% if answer_list.0 == '5' %} checked {% endif %} />
                              <label for="star5{{question.id}}" title="5 Stars">5 {% trans "Stars" %}</label>
                              <input type="radio" id="star4{{question.id}}" value="4" disabled  {% if answer_list.0 == '4' %} checked {% endif %} />
                              <label for="star4{{question.id}}" title="4 Stars">4 {% trans "Stars" %}</label>
                              <input type="radio" id="star3{{question.id}}" value="3" disabled  {% if answer_list.0 == '3' %} checked {% endif %} />
                              <label for="star3{{question.id}}" title="3 Stars">3 {% trans "Stars" %}</label>
                              <input type="radio" id="star2{{question.id}}" value="2" disabled  {% if answer_list.0 == '2' %} checked {% endif %}  />
                              <label for="star2{{question.id}}" title="2 Stars">2 {% trans "Stars" %}</label>
                              <input type="radio" id="star1{{question.id}}" value="1" disabled  {% if answer_list.0 == '1' %} checked {% endif %} />
                              <label for="star1{{question.id}}" title="1 Star">1 {% trans "Star" %}</label>
                            </div>
                        {% else %}
                          {{ answer_list.0 }}
                        {% endif %}
                      {% endif %}
                    </div>
                  </div>
              {% endif %}
            {% endfor %}
            </div>
            {% endfor %}
            {% else %}
              <div class='d-flex mt-5' style='margin-left:30%;'>
                <img style="width: 80px;height: 80px;" src="{% static 'images/ui/editor.png' %}" />
                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No survey templates have been established yet." %}</h5>
              </div>
            {% endif %}
        </div>
        <div
          class="oh-general__tab-target oh-profile__info-tab mb-4 d-none"
          id="onboarding"
        >
        <style>
          .onboarding-task-status{
            padding: 20px;
            margin-top: 5px;
            font-weight: 700;
          }
          .onboarding-task-status--ongoing{
            border-left: solid 4px yellow;
            background-color: rgba(255, 255, 0, 0.113);
          }
          .onboarding-task-status--stuck{
            border-left: solid 4px rgb(255, 60, 0);
            background-color: rgb(255, 60, 0,0.113);
          }
          .onboarding-task-status--todo, .onboarding-task-status--None{
            border-left: solid 4px rgb(205, 205, 205);
            background-color: rgba(205,205,205,0.113);
          }
          .onboarding-task-status--done{
            border-left: solid 4px rgb(154, 205, 50);
            background-color: rgba(154, 205, 50,0.113);
          }
          .onboarding-task-status--scheduled{
            border-left: solid 4px rgb(0, 255, 255);
            background-color: rgb(0, 255, 255,0.133);
          }
          .oh-sticky-table__tr:hover {
            background-color: #fff
          }
        </style>
        <div class="oh-sticky-table">
          <div class="oh-sticky-table__table oh-table--sortable">
            <div class="oh-sticky-table__thead">
                <div class="oh-sticky-table__tr">
                    <div class="oh-sticky-table__th"></div>
                </div>
            </div>
            <div class="oh-sticky-table__tbody">
              {% for task in candidate.candidate_task.all %}
                <div class="oh-sticky-table__tr">
                  <div class="oh-sticky-table__td">
                    <div class="oh-sticky-table__sd d-flex justify-content-between" style="width: 500px;overflow: hidden;">
                      <div class="oh-profile oh-profile--md">
                        <span class="oh-profile__name oh-text--dark">{{ task.onboarding_task_id.task_title }}</span>
                      </div>
                      <span class="oh-recuritment_tag  {% if task.status == 'done' %} done-task {% elif task.status == 'scheduled' %} scheduled-task{% elif task.status == 'ongoing' %} ongoing-task{% elif task.status == 'stuck' %} dd stuck-task {% elif task.status == 'todo' %} todo-task{% endif %}">
                        <select hx-swap="none" hx-get="{% url 'change-task-status' %}?task_id={{task.id}}"
                        name="status"
                        style="width: 150px;"
                        id="task_status{{task.id}}">
                            {% for status in task.choice %}
                            <option value="{{status.0}}"
                            {% if status.0 == task.status %}
                            selected
                            {% endif %}
                            >{{status.1}}</option>
                            {% endfor %}
                        </select>
                      </span>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
           </div>
        </div>

        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Active tab script
    function activeCandTab() {
      var activeTab = localStorage.getItem("activeCandTab");
      if (
        !$(`[data-target="${activeTab}"]`).length &&
        $(`[data-target="#personal"]`).length
      ) {
        $(`[data-target="#personal"]`)[0].click();
      } else if (activeTab != null) {
        $(".oh-general__tab-link--active").removeClass(
          "oh-general__tab-link--active"
        );
        $(`[data-target='${activeTab}']`).addClass(
          "oh-general__tab-link--active"
        );
        $(".oh-general__tab-target").addClass("d-none");
        $(activeTab).removeClass("d-none");
      }
    }
    activeCandTab();
    $("[data-action=general-tab]").click(function (e) {
      e.preventDefault();
      const targetId = $(this).attr("data-target");
      localStorage.setItem("activeCandTab", targetId);
    });
  });

  // Profile picture enlarging

  function showImage(image) {
    var showImageContainer = document.getElementById("showImageContainer");
    showImageContainer.innerHTML = "";

    var enlargedImage = document.createElement("img");
    enlargedImage.src = image.src;
    showImageContainer.appendChild(enlargedImage);

    setTimeout(function () {
      showImageContainer.style.display = "block";
    }, 250);
  }

  function hideshowImage() {
    var showImageContainer = document.getElementById("showImageContainer");
    showImageContainer.innerHTML = ""; // Clear the content
    showImageContainer.style.display = "none";
  }
</script>
{% endblock content %}