{% load static %} {% load basefilters %} {% load recruitmentfilters %} {% load employee_filter %} {% load i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
<div id="mainNav"></div>
<!-- End of Navigation -->
<style>
  .oh-card-dashboard--moveable {
    padding: 0 10px 20px 10px;
  }
  .oh-card-dashboard:not(.tile) {
    cursor: default;
    min-height: 425px;
  }
  .oh-dashboard__movable-cards {
    padding-right: 0;
  }
  .oh-card-dashboard--moveable {
    padding-right: 0;
    padding-bottom: 10px;
  }
  .progress {
    height: 20px;
    width: 110px;
    background-color: lightgrey;
    border:2px solid #27C20C;
    border-radius: 5px;
    overflow: hidden;
  }
  .progress-bar {
    height: 100%;
    background-color: #27C20C; /* Set your desired progress bar color */
  }
  .progress-text {
    width: 100%;
    text-align: center;
  }
  .oh-modal_close--custom {
    border: none;
    background: none;
    font-size: 1.5rem;
    opacity: 0.7;
    position: absolute;
    top: 25px;
    right: 15px;
  }

  .container-heading {
    font-size: 18px;
    font-weight: bold;
    padding:10px;
  }

  .oh-kanban-card__title {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
      border:1px solid hsl(150deg 100% 15% / 52%);
      border-radius: 18px;
      margin-right:10px;
      background-color:hsl(138.46deg 100% 74.19% / 33%);
  }

  .announcement_title{
    margin-bottom: 10px;
    padding: 8px;
    margin-right:10px;
    text-decoration:none;
  }
</style>
<main>
  <div class="oh-wrapper">
    <!-- back button -->
    <div class="d-none mt-5" id="back_button" style="width: 10%">
      <a
        href="{% url 'home-page' %}"
        class="oh-btn oh-btn--secondary oh-btn--shadow ms-3"
      >
        <ion-icon
          class="me-2 md hydrated"
          name="arrow-back-outline"
          role="img"
          aria-label="arrow-back-outline"
        ></ion-icon
        >{% trans "Back" %}</a
      >
    </div>
    <!-- end of back button -->
    <div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">
      <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
        <div class="oh-dashboard__cards row">
          {% if perms.employee.view_employee %}
          <div class="col-12 col-sm-12 col-md-6 col-lg-4">
            <div class="oh-card-dashboard oh-card-dashboard--success tile">
              <a
                href="{% url 'candidate-view' %}?joining_date={{current_date}}"
                style="text-decoration: none"
              >
                <div class="oh-card-dashboard__header">
                  <span class="oh-card-dashboard__title"
                    >{% trans "New Joining Today" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <div class="oh-card-dashboard__counts">
                    <span
                      class="oh-card-dashboard__count"
                      id="newbieToday"
                    ></span>
                  </div>
                </div>
              </a>
            </div>
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-4">
            <div
              class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile"
            >
              <a
                href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
                style="text-decoration: none"
              >
                <div class="oh-card-dashboard__header">
                  <span class="oh-card-dashboard__title"
                    >{% trans "New Joining This Week" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <div class="oh-card-dashboard__counts">
                    <span class="oh-card-dashboard__count" id="newbie"></span>
                  </div>
                </div>
              </a>
            </div>
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-4">
            <a href="{% url 'employee-view' %}" style="text-decoration: none">
              <div class="oh-card-dashboard oh-card-dashboard--neutral tile">
                <div class="oh-card-dashboard__header">
                  <span class="oh-card-dashboard__title"
                    >{% trans "Total Strength" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <div class="oh-card-dashboard__counts">
                    <span
                      class="oh-card-dashboard__count"
                      id="totalEmployeesCount"
                      ></span
                    >
                  </div>
                </div>
              </div>
            </a>
          </div>
          {% endif %}
          <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
            {% if perms.candidate.view_employee or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="notInYetId"
              hx-get="{% url "not-in-yet" %}"
              hx-trigger="load"
            >
              {% include "dashboard/not_in_yet.html" %}
            </div>
      
            {% endif %}
            {% if perms.candidate.view_employee or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="notoutYetdd"
              hx-get="{% url "not-out-yet" %}"
              hx-trigger="load"
            >
              {% include "dashboard/not_out_yet.html" %}
            </div>
      
            {% endif %}
            {% if perms.leave.veiw_leaverequest %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable1"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Overall Leave" %}</span
                  >
                  <select
                    class="oh-select oh-select--sm float-end"
                    name=""
                    id="overAllLeaveSelect"
                  >
                    <option value="today" selected>{% trans "Today" %}</option>
                    <option value="week">{% trans "This Week" %}</option>
                    <option value="month">{% trans "This Month" %}</option>
                    <option value="year">{% trans "This Year" %}</option>
                  </select>
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="overAllLeave" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            {% endif %} {% if perms.candidate.view_candidate or request.user|is_stagemanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="movable2"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Hired Candidates" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="hiredCandidate" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="movable3"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Candidates Started Onboarding" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas
                    id="onboardCandidate"
                    style="cursor: pointer"
                  ></canvas>
                </div>
              </div>
            </div>
            {% endif %} {% if request.user|is_stagemanager or perms.recruitment.view_recruitment %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="movable8"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Recruitment Analytics" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas
                    id="recruitmentChart1"
                    style="cursor: pointer"
                  ></canvas>
                </div>
              </div>
            </div>
            {% endif %} {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="movable4"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                  id="attendance_header"
                >
                  <div class="oh-card-dashboard__title mb-2">
                    {% trans "Attendance Analytics" %}
                  </div>
                  <div class="d-flex justify-content-between mb-2">
                    <select
                      id="type"
                      class="oh-select"
                      name="type"
                      onchange="changeView(this)"
                      style="width: 150px; padding: 3px; color: #5e5c5c"
                    >
                      <option value="day">{% trans "Day" %}</option>
                      <option value="weekly">{% trans "Weekly" %}</option>
                      <option value="monthly">{% trans "Monthly" %}</option>
                      <option value="date_range">{% trans "Date range" %}</option>
                    </select>
                    <span id="day_input">
                      <input
                        type="date"
                        class="mb-2 float-end pointer oh-select"
                        id="attendance_month"
                        onchange="changeMonth()"
                        style="width: 100px; color: #5e5c5c"
                      />
                    </span>
                  </div>
                  <div class="oh-card-dashboard__body">
                    <canvas id="dailyAnalytic" style="cursor: pointer"></canvas>
                  </div>
                </div>
              </div>
            </div>
            {% endif %} {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
              id="pendingHours"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                  id="pendingHoursHeader"
                >
                  <div class="oh-card-dashboard__title mb-2">
                    {% trans "Hours Chart" %}
                  </div>
                  <div class="d-flex justify-content-between mb-2">
                    <input
                      type="month"
                      class="mb-2 float-end pointer oh-select"
                      id="hourAccountMonth"
                      onchange="dynamicMonth($(this))"
                      style="width: 100px; color: #5e5c5c"
                    />
                  </div>
                  <div class="oh-card-dashboard__body" style="height:300px">
                    <canvas
                      id="pendingHoursCanvas"
                      style="cursor: pointer"
                    ></canvas>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable5"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Employees Chart" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="totalEmployees" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable6"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Department Chart" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="departmentChart" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable7"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Gender Chart" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="genderChart" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
             {% if perms.pms.view_employeeobjective or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable9"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Objective Status" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="objectiveChart" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            {% endif %} {% if perms.pms.view_employeekeyresult or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable10"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Key Result Status" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <canvas id="keyResultChart" style="cursor: pointer"></canvas>
                </div>
              </div>
            </div>
            {% endif %} {% if perms.pms.view_feedback or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
              id="movable11"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Feedback Status" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body">
                  <div class="oh-card-dashboard__body">
                    <canvas id="feedbackChart" style="cursor: pointer"></canvas>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            
            {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="shiftRequestApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Shift Requests To Approve" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="shiftRequestApproveBody"
                  hx-get="{% url "dashboard-shift-request" %}"
                  hx-trigger="load"                  
                  style="height:80%"
                >
                  {% include "request_and_approve/shift_request.html" %}
                </div>
              </div>              
            </div>      
            {% endif %}
            {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="WorkTypeRequestApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Work Type Requests To Approve" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="WorkTypeRequestApproveBody"
                  hx-get="{% url "dashboard-work-type-request" %}"
                  hx-trigger="load"
                  style="height:80%"
                >
                  {% include "request_and_approve/work_type_request.html" %}
                </div>
              </div>              
            </div>      
            {% endif %}
            {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="OTApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" 
                hx-get="{% url "dashboard-overtime-approve" %}"
                hx-trigger="load"
                style="height:425px"
                id="OTApproveTarget"
              >
              {% include "request_and_approve/overtime_approve.html" %}
              </div>              
            </div>      
            {% endif %}
            {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="AttendanceValidate"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
                hx-get="{% url "dashboard-attendance-validate" %}"
                hx-trigger="load"
                id="AttendanceValidateTarget"
              >
                  {% include "request_and_approve/attendance_validate.html" %}
              </div>
            </div>      
            {% endif %}
            {% if perms.leave.change_leaverequest or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="LeaveApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Leave Requests To Approve" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="LeaveApproveBody"
                  hx-get='{% url "leave-request-and-approve" %}'
                  hx-trigger="load"
                  style="height:80%"
                >
                </div>
              </div>              
            </div>      
            {% endif %}
            {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="LeaveAllocationApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Leave Allocation Request To Approve" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="LeaveAllocationApproveBody"
                  hx-get='{% url "leave-allocation-approve" %}'
                  hx-trigger="load"
                  style="height:80%"
                >
                  {% include "request_and_approve/leave_request_approve.html" %}
                </div>
              </div>              
            </div>      
            {% endif %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="feedbackAnswer"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Feedback Answers" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="feedbackAnswerBody"
                  hx-get='{% url "dashboard-feedback-answer" %}'
                  hx-trigger="load"
                  style="height:80%"
                >
                  {% include "request_and_approve/feedback_answer.html" %}
                </div>
              </div>              
            </div>
            {% if perms.asset.change_assetrequest or request.user|is_reportingmanager %}
            <div
              class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="assetRequestApprove"
            >
              <div
                class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
              >
                <div
                  class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                >
                  <span class="oh-card-dashboard__title"
                    >{% trans "Asset Requests To Approve" %}</span
                  >
                </div>
                <div class="oh-card-dashboard__body"
                  id="assetRequestApproveBody"
                  hx-get='{% url "dashboard-asset-request-approve" %}'
                  hx-trigger="load"
                  style="height:80%"
                >
                  {% include "request_and_approve/asset_requests_approve.html" %}
                </div>
              </div>              
            </div>      
            {% endif %}
          </div>
        </div>
      </div>
      <div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
        <div class="oh-dashboard__events">
          <div
            class="oh-dashbaord__events-reel w-100"
            id="birthdayContainer"
          ></div>
          <ul class="oh-dashboard__events-nav" id="birthdayDots">
          </ul>
        </div>

        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
          <div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
              <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
              {% if perms.base.add_announcement %}
                <span>
                    <button style="display: inline-block;padding: 0px;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 28px;" 
                        class="oh-btn oh-btn--secondary-outline float-end ms-3" hx-get='{% url "create-announcement" %}' 
                        hx-target="#createannouncementForm" hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#anouncementModal" title='{% trans "Create Announcement." %}'>
                        <ion-icon name="add-outline" class="m-0"></ion-icon>
                    </button>
                </span>
              {% endif %}
          </div>
        
          <hr>

          <div class="oh-card-dashboard__body">
            <div class="oh-sticky-table" style="height:400px; border:none;">
              <div class="oh-sticky-table__table oh-table--sortable">
                <div class="oh-sticky-table__tbody">

                  {% if not announcement %}

                    <div class="oh-sticky-table__tr" draggable="true">
                          <div class="oh-404" style="margin-top:130px;">
                            <h5 class="oh-404__subtitle">{% trans "No Announcements to show." %}</h5>
                            <img style="width: 80px;height: 80px;" src="{% static 'images/ui/no-announcement.svg' %}" class="oh-404__image" alt="Page not found. 404."/>
                          </div>
                    </div>

                  {% else %}

                    {% for i in announcement %}
                        <div class="oh-sticky-table__tr" draggable="true">
                            {% if i.expire_date|date:"Y-m-d" >= current_date or i.expire_date == None %}
                                <div class="announcement_title">
                                    <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                                        data-target="#announcement"
                                        hx-get="{% url 'announcement-single-view' i.id %}"
                                        hx-target="#announcementModalBody"
                                        onclick="closeNew(this)">
                                        <div class="oh-profile__avatar mr-1">
                                            <img src="https://ui-avatars.com/api/?name={{i.title}}&background=random" class="oh-profile__image" />
                                        </div>
                                        <span class="oh-profile__name oh-text--dark fw-bold">
                                            {{i.title}}
                                        </span>
                                        {% if i.created_on|date:"Y-m-d" == current_date and not i.has_viewed %}
                                            <span class="oh-profile__info-value ms-2" id="newTab" style="background-color: hsl(8,77%,56%); color:white;
                                                font-size: 0.7rem; padding: 3px 8px; border-radius: 15px; font-weight: 800; width:auto;" 
                                            >NEW</span>
                                        {% endif %}
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}

                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>



        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3 mt-2">
          <div class="oh-card-dashboard__title mt-4 mb-3">{% trans "Quick Actions" %}</div> <hr>  

          <div class="oh-card-dashboard__body">
            <div class="oh-sticky-table" style="height:400px; border:none;">
              <div class="oh-sticky-table__table oh-table--sortable">
                <div class="oh-sticky-table__tbody">

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#newAttendanceRequest"
                          hx-get="{% url 'request-new-attendance' %}"
                          hx-target="#newAttendanceRequestModalBody">
                          <div class="oh-profile__avatar mr-1">
                            <img src="https://ui-avatars.com/api/?name=A R&background=random" class="oh-profile__image" />
                          </div>
                          <span class="oh-profile__name oh-text--dark">
                            {% trans "Attendance Request" %}
                          </span>
                        </a>
                      </div>
                    </div>
      
                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                          <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                              data-target="#requestCreateModal"
                              hx-get="{% url 'request-creation' %}"
                              hx-target="#requestCreateFormModal">
                              <div class="oh-profile__avatar mr-1">
                                  <img src="https://ui-avatars.com/api/?name=L R&background=random" class="oh-profile__image" />
                              </div>
                              <span class="oh-profile__name oh-text--dark">
                              {% trans "Leave Request" %}
                              </span>
                          </a>
                      </div>
                    </div>
      
                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#shiftRequestModal"
                          hx-get="{% url 'shift-request' %}?emp_id={{request.user.employee_get.id}}"
                          hx-target="#shiftRequestTargetModal">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=S R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Shift Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle='oh-modal-toggle' style="text-decoration:none;"
                          data-target='#workTypeRequestModal'
                          hx-get="{% url 'work-type-request' %}"
                          hx-target='#formBody'>
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=W R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Worktype Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" hx-get="{% url 'create-reimbursement' %}" style="text-decoration:none;"
                        hx-target="#reimbursementModalBody" data-toggle="oh-modal-toggle" data-target="#reimbursementModal">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=R R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Reimbursement Request" %}
                            </span>
                          </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#asset-request-allocation-modal"
                          hx-get="{%url 'asset-request-creation'%}"
                          hx-target="#asset-request-allocation-modal-target">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=A R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Asset Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#createModal1"
                          hx-get="{% url 'ticket-create' %}"
                          hx-target="#createTarget">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=T C&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Ticket Creation" %}
                            </span>
                        </a>
                      </div>
                    </div>

                  </div>
              </div>
            </div>
          </div>
        </div>
          
        
        <div
        class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3"
      >
        <div
          class="oh-card-dashboard__header oh-card-dashboard__header--divider"
        >
          <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
        </div>
        <div class="oh-card-dashboard__body">
          <ul class="oh-card-dashboard__user-list" id="leaveEmployee"></ul>
        </div>
      </div>

        {% comment %} <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3 mt-2">
          <div class="oh-card-dashboard__title mt-4 mb-3">{% trans "Quick Actions" %}</div> <hr>  

          <div class="oh-card-dashboard__body">
            <div class="oh-sticky-table" style="height:400px; border:none;">
              <div class="oh-sticky-table__table oh-table--sortable">
                <div class="oh-sticky-table__tbody">

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#newAttendanceRequest"
                          hx-get="{% url 'request-new-attendance' %}"
                          hx-target="#newAttendanceRequestModalBody">
                          <div class="oh-profile__avatar mr-1">
                            <img src="https://ui-avatars.com/api/?name=A R&background=random" class="oh-profile__image" />
                          </div>
                          <span class="oh-profile__name oh-text--dark">
                            {% trans "Attendance Request" %}
                          </span>
                        </a>
                      </div>
                    </div>
      
                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                          <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                              data-target="#requestCreateModal"
                              hx-get="{% url 'leave-request-create' %}"
                              hx-target="#requestCreateFormModal">
                              <div class="oh-profile__avatar mr-1">
                                  <img src="https://ui-avatars.com/api/?name=L R&background=random" class="oh-profile__image" />
                              </div>
                              <span class="oh-profile__name oh-text--dark">
                              {% trans "Leave Request" %}
                              </span>
                          </a>
                      </div>
                    </div>
      
                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#shiftRequestModal"
                          hx-get="{% url 'shift-request' %}?emp_id={{request.user.employee_get.id}}"
                          hx-target="#shiftRequestTargetModal">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=S R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Shift Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle='oh-modal-toggle' style="text-decoration:none;"
                          data-target='#workTypeRequestModal'
                          hx-get="{% url 'work-type-request' %}"
                          hx-target='#formBody'>
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=W R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Worktype Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" hx-get="{% url 'create-reimbursement' %}" style="text-decoration:none;"
                        hx-target="#reimbursementModalBody" data-toggle="oh-modal-toggle" data-target="#reimbursementModal">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=R R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Reimbursement Request" %}
                            </span>
                          </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#asset-request-allocation-modal"
                          hx-get="{%url 'asset-request-creation'%}"
                          hx-target="#asset-request-allocation-modal-target">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=A R&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Asset Request" %}
                            </span>
                        </a>
                      </div>
                    </div>

                    <div class="oh-sticky-table__tr" draggable="true">
                      <div class="oh-kanban-card__title">
                        <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
                          data-target="#createModal1"
                          hx-get="{% url 'ticket-create' %}"
                          hx-target="#createTarget">
                          <div class="oh-profile__avatar mr-1">
                              <img src="https://ui-avatars.com/api/?name=T C&background=random" class="oh-profile__image" />
                            </div>
                            <span class="oh-profile__name oh-text--dark">
                              {% trans "Ticket Creation" %}
                            </span>
                        </a>
                      </div>
                    </div>

                  </div>
              </div>
            </div>
          </div>
        </div> {% endcomment %}

        {% if perms.leave.view_leaverequest or request.user|is_reportingmanager%}
        <div
          class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
        > 
        
          <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
            <span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
          </div>
          
          <!-- Search bar -->
          <div class="oh-search-bar mb-3">
            <input type="text" id="employeeSearch" placeholder="Search Employee">
          </div>
          
          <div class="oh-table" style="max-height: 425px; overflow-y: auto;">
            <table>
                <thead>
                  <tr>
                    <th style="font-weight:bold; font-size:15px; color:black;">{% trans "Employee" %}</th>
                    <!-- Add more table headers as needed -->
                    <th style="font-weight:bold; font-size:15px; color:black;">{% trans "Progress" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for employee_info in employees_with_pending %}
                    <tr>
                      <td>
                        <a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
                          {{ employee_info.employee.employee_id }}</a>
                      </td>
                      <td style="position: relative;">
                        <a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
                          <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: {{ employee_info.completed_field_count }}%;"></div>
                          </div>
                          <div class="progress-text">{{ employee_info.completed_field_count }}% {% trans "Completed" %}</div>
                        </a>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
            </table>
          </div>

        </div>
        {% endif %}

      </div>
    </div>
  </div>
  <div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
    <div class="oh-modal__dialog">
      <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="sendMailModalLabel"><h5>{% trans 'Send Mail' %}</h5></span>
        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>
      <div class="oh-modal__dialog-body" id="mail-content"></div>
    </div>
  </div>
  
<div
  class="oh-modal"
  id="smallModal"
  role="dialog"
  aria-labelledby="smallModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog oh-modal__dialog--timeoff oh-timeoff-modal">
    <div class="oh-modal__dialog-header">
      <h2
        class="oh-modal__dialog-title"
        id=""
      >
        {% trans "Details" %}
      </h2>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div
      class="oh-modal__dialog-body oh-modal__dialog-relative oh-timeoff-modal__body"
      id="smallModalTarget"
    ></div>
      {% comment %} <div id="smallModalBody">

      </div> {% endcomment %}
  </div>
</div>
  
<div
  class="oh-modal"
  id="bigModal"
  role="dialog"
  aria-labelledby="bigModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h2
        class="oh-modal__dialog-title"
        id=""
      >
        {% trans "Details" %}
      </h2>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div
      class="oh-modal__dialog-body oh-modal__dialog-relative"
      id="bigModalTarget"
    ></div>
  </div>
</div>


<div
  class="oh-modal"
  id="editModal"
  role="dialog"
  aria-labelledby="editModal"
  aria-hidden="true"
  >
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <h2 class="oh-modal__dialog-title" id="editModalLabel">
              {% trans "Add Asset Report" %}
            </h2>
            <button
              type="button"
              class="oh-modal_close--custom"
              onclick="$('#editModal').removeClass('oh-modal--show');"
                >
                <ion-icon
                  name="close-outline"
                  role="img"
                  aria-label="close outline"
                ></ion-icon>
            </button>
        </div>
        <div class="oh-modal__dialog-body" id="editModalForm"></div>
    </div>
</div>

{% include "quick_access.html" %}
{% include "announcement_single_view.html" %}


</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="{% static 'dashboard/getBirthday.js' %}"></script>
<script src="{% static 'dashboard/onLeave.js' %}"></script>
<script src="{% static 'dashboard/employeeChart.js' %}"></script>
{% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
<script src="{% static 'dashboard/leaveChart.js' %}"></script>
<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
{% endif %} {% if perms.employee.view_employee or request.user|is_reportingmanager %}
{% endif %} {% if perms.employee.view_attendance or request.user|is_reportingmanager %}
<script src="{% static 'dashboard/attendanceChart.js' %}"></script>
<!-- onbaording dashboard -->
<script src="{% static 'dashboard/onboardChart.js' %}"></script>

<!-- PMS chart -->
<script src="{% static 'src/dashboard/pmsChart.js' %}"></script>
{% endif %}

<!-- leave dashboard -->
<script>
  function setDifference(setA, setB) {
    if (setB.length > setA.length) {
      temp = setA
      setA = setB
      setB = temp
    }
    return [...setA.filter(element => !setB.includes(element))];
  }
  $(document).ready(function () {
    if (localStorage.getItem("tileOrder")) {
      var tileOrder = []
      $.each(
        $(".oh-card-dashboard--moveable"),
        function (indexInArray, valueOfElement) {
          tileOrder.push($(valueOfElement).attr("id"));
        }
      );
      var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
      var existingElements = $(".oh-card-dashboard--moveable[id]")
      var existingElementsIds = [];
      $.each(existingElements, function (indexInArray, valueOfElement) { 
        existingElementsIds.push($(this).attr("id"))
      });
      var newOrderIds = [...storedIds ,...setDifference(storedIds,existingElementsIds)]
      if (storedIds.length != existingElementsIds.length) {
        localStorage.setItem("tileOrder",JSON.stringify(newOrderIds))
      }

    }else{
      localStorage.setItem("tileOrder",JSON.stringify(
        [
          "notInYetId","LeaveApprove","shiftRequestApprove","WorkTypeRequestApprove","AttendanceValidate","OTApprove",
          "LeaveAllocationApprove","feedbackAnswer","assetRequestApprove","movable8","pendingHours","notoutYetdd",
          "movable2","movable3","movable4","movable1","movable5","movable6","movable7","movable9","movable10","movable11"
        ]
      ))
    }
    // localStorage.setItem("tileOrder", JSON.stringify(tileOrder));

    function orderDashboardTile() {
      var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
      const parentContainer = $("#tileContainer");
      if (orderIds != null) {
        const sortedElements = [];

        // Loop through the desired order of IDs
        for (const id of orderIds) {
          const element = $("#" + id);
          if (element.length) {
            sortedElements.push(element);
          }
        }

        // Clear the parent container
        parentContainer.empty();

        // Append the sorted elements to the parent container
        for (const element of sortedElements) {
          parentContainer.append(element);
        }
      }
    }
    orderDashboardTile();
    $(".oh-card-dashboard--moveable").mouseup(function () {
      var tileOrder = [];
      setTimeout((e) => {
        $.each(
          $(".oh-card-dashboard--moveable"),
          function (indexInArray, valueOfElement) {
            tileOrder.push($(valueOfElement).attr("id"));
          }
        );
        localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
      }, 10);
    });
  });

  function closeNew(anchorElement){
    $(anchorElement).parent().find('#newTab').hide();
  }

  $(document).ready(function() {
      // Add an input event listener to the search bar
      $("#employeeSearch").on("input", function() {
          // Get the value entered in the search bar
          var searchValue = $(this).val().toLowerCase();

          // Iterate through each table row and hide/show based on the search value
          $("table tbody tr").each(function() {
              var employeeId = $(this).find("td:first-child").text().toLowerCase();

              // Toggle the visibility of the row based on whether it contains the search value
              $(this).toggle(employeeId.includes(searchValue));
          });
      });
  });
</script>