{% extends 'index.html' %} {% block content %} {% load mathfilters static recruitmentfilters i18n %}
<style>
	.oh-card-dashboard{
		height: 100;
	}
    .done-task{
        background-color: #9acd322e !important;
    }
    .scheduled-task{
        background-color: #00afff2e !important;
    }
    .ongoing-task{
        background-color: #e6ff002e !important;
    }
    .stuck-task{
        background-color: #ff45003b !important;
    }
    .todo-task{
        background-color: #8d8d8d2e !important;
    }
	.tooltip {
		position: absolute;
		background-color: #000;
		color: #fff;
		padding: 5px;
		border-radius: 5px;
		display: block;
		margin-top:80px;
	}

</style>
<div class="oh-wrapper">
	<div class="oh-dashboard row">
		<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-12">
			<div class="oh-dashboard__cards row">
				<div class="col-12 col-sm-12 col-md-6 col-lg-2" style="cursor:default;">
					<a href="#" class="text-decoration-none">
						<div class="oh-card-dashboard oh-card-dashboard--warning">
							<div class="oh-card-dashboard__header">
								<span class="oh-card-dashboard__title">{% trans "Total Vacancies" %}</span>
							</div>
							<div class="oh-card-dashboard__body">
								<div class="oh-card-dashboard__counts">
									<span class="oh-card-dashboard__count"
										>{{total_vacancy}}</span
									>
									</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-12 col-sm-12 col-md-6 col-lg-2  ">
					<a href="/recruitment/recruitment-view" class="text-decoration-none">
						<div class="oh-card-dashboard oh-card-dashboard--danger">
							<div class="oh-card-dashboard__header">
								<span class="oh-card-dashboard__title">{% trans "Ongoing Recruitments" %}</span>
							</div>
							<div class="oh-card-dashboard__body">
								<div class="oh-card-dashboard__counts">
									<span class="oh-card-dashboard__count"
										>{{ongoing_recruitments}}</span
									>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="col-12 col-sm-12 col-md-6 col-lg-2  ">
					<a href="/recruitment/candidate-view?hired=true" class="text-decoration-none">
						<div
							class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--success filter"
						>
							<div class="oh-card-dashboard__header">
								<span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
							</div>
							<div class="oh-card-dashboard__body">
								<div class="oh-card-dashboard__counts">
									<span class="oh-card-dashboard__count"
									>{{total_hired_candidates}}</span
									>
								</div>
							</div>
						</div>
					</a>
				</div>

				<div class="col-12 col-sm-12 col-md-6 col-lg-3">
					<div class="oh-card-dashboard oh-card-dashboard--neutral">
						<div class="oh-card-dashboard__header" onmouseover="conversion_helptext()">
							<span class="oh-card-dashboard__title">{% trans "Conversion Rate" %}</span>
							<ion-icon name="help-circle-outline" id="offerhelptext"></ion-icon>
						</div>
						<div class="oh-card-dashboard__body">
							<div class="oh-card-dashboard__counts">
								<span class="oh-card-dashboard__count">{{conversion_ratio}}%</span>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-sm-12 col-md-6 col-lg-3">
					<div class="oh-card-dashboard oh-card-dashboard--success">
						<div class="oh-card-dashboard__header" onmouseover="acceptance_helptext()">
							<span class="oh-card-dashboard__title">{% trans "Offer Acceptance Rate (OAR)" %}</span>
							<ion-icon name="help-circle-outline" id="offerhelptext"></ion-icon>
						</div>
						<div class="oh-card-dashboard__body">
							<div class="oh-card-dashboard__counts">
								<span class="oh-card-dashboard__count">{{acceptance_ratio}}%</span>
							</div>
						</div>
					</div>
				</div>

			</div>

				<div class="oh-dashboard__movable-cards row mt-4">
					<div class="col-12 col-sm-12 col-md-6 col-lg-4 oh-card me-4" style="border:0px solid white" >
						<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
							<span class="oh-card-dashboard__title">{% trans "Skill Zone Status" %}</span>
						</div>
						<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
							{% if skill_zone %}
								<ul class="oh-card-dashboard__user-list">
									{% for skill in skill_zone %}
									<li class="oh-card-dashboard__user-item">
										<div class="oh-profile oh-profile--md">
										<a href="/recruitment/skill-zone-view?title={{skill}}"><div class="oh-profile__avatar mr-1">
											<img
											src="https://ui-avatars.com/api/?name={{skill}}&background=random"
											class="oh-profile__image"
											alt="{{cand}}"
											/>
										</div></a>
										<a href="/recruitment/skill-zone-view?search={{skill}}"><span class="oh-profile__name oh-text--dark">{{skill}}</span></a>
										</div>
										<p class="oh-profile__name float-end mt-1 me-3">
											 &nbsp {{skill.skillzonecandidate_set.all|length}} &nbsp {% if skill.skillzonecandidate_set.all|length != 1  %} {% trans "Candidates" %} {% else %} {% trans "Candidate" %} {% endif %}</p>
									</li>
									{% endfor %}
								</ul>
							{% else %}
								<div style="height: 240px; display:flex;align-items: center;justify-content: center;" class="">
									<div style="" class="">
										<img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/no_candidate.png' %}" class=""/>
										<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No skill zone available." %}</h3>
									</div>
								</div>
							{% endif %}

						</div>
					</div>


					{% comment %} <div class="col-12 col-sm-12 col-md-6 col-lg-3  oh-card-dashboard--moveable me-4" style="background-color: white;">
						<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 "Open Positions By Department" %}</span>
							</div>
							<div class="oh-card-dashboard__body" >
								{% if dep_vacancy %}
								<div >
									<canvas id="vacancy"></canvas>
								</div>
								{% else %}
								<div style="display:flex;align-items: center;justify-content: center;">
									<div style="height:282px; justify-content:center;align-items:center; margin-top: -59px;" class="d-flex">
										<img style="height:125px;" src="{% static 'images/ui/no_vacancy.png' %}" class=""/>
									</div>
								</div>
								<h3 style="font-size:16px; margin-bottom:69px;" class="oh-404__subtitle">{% trans "No department-specific vacancies currently." %}</h3>
								{% endif %}

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


					<div class="col-12 col-sm-12 col-md-6 col-lg-3 oh-card-dashboard--moveable me-4" style="background-color: white;">
						<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 "Candidate Offer Letter Status" %}</span>

							</div>
							<div class="oh-card-dashboard__body" >
								{% if total_candidates %}
								<div >

									<canvas id="candidateChart"></canvas>

								</div>
								{% else %}
								<div style="display:flex;align-items: center;justify-content: center;">
									<div style="height:282px; justify-content:center;align-items:center; margin-top: -59px;" class="d-flex">
										<img style="height:125px;" src="{% static 'images/ui/no_vacancy.png' %}" class=""/>
									</div>
								</div>
								<h3 style="font-size:16px; margin-bottom:69px;" class="oh-404__subtitle">{% trans "No Candidates available." %}</h3>
								{% endif %}

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

					<div class="col-12 col-sm-12 col-md-6 col-lg-4 oh-card" style="border:0px solid white" >
						<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
							<span class="oh-card-dashboard__title">{% trans "Candidate on Onboard" %}</span>
							{% if onboarding_count %}<span class="oh-card-dashboard__title float-end"><a href="{% url 'candidate-view' %}?start_onboard=true" style="text-decoration:none; color:orange;">{% trans "View" %}</a></span>{% endif %}
						</div>
						<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
							{% if onboarding_count %}
								<ul class="oh-card-dashboard__user-list">
									{% for cand in onboard_candidates %}
									<li class="oh-card-dashboard__user-item">
										<div class="oh-profile oh-profile--md">
										<div class="oh-profile__avatar mr-1">
											<img
											src="https://ui-avatars.com/api/?name={{cand}}&background=random"
											class="oh-profile__image"
											alt="{{cand}}"
											/>
										</div>
										<span class="oh-profile__name oh-text--dark">{{cand|truncatechars:15}}</span>
										</div>
										<p class="oh-profile__name float-end mt-1 me-3">
											{{cand.job_position_id|truncatechars:15}}</p>
									</li>
									{% endfor %}
								</ul>
							{% else %}
								<div style="height: 240px; display:flex;align-items: center;justify-content: center;" class="">
									<div style="" class="">
										<img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/no_candidate.png' %}" class=""/>
										<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No candidates started onboarding." %}</h3>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
				</div>


				<div class="oh-dashboard__movable-cards row mt-4">
					{% if request.user|is_in_task_managers %}
						<div
								class="col-12 col-sm-12 col-md-6 col-lg-7 oh-card-dashboard--moveable"
								style="height: 455px;
								background-color: white;"
								id="taskStatus"
								hx-get="{% url "task-report-onboarding" %}"
								hx-trigger="load"
								>
						</div>
					{% else %}
						<div
							class="col-12 col-sm-12 col-md-6 col-lg-7 oh-card-dashboard--moveable"
						>
						<div
						class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" >
						<span class="oh-card-dashboard__title">{% trans "My Onboarding Tasks" %}</span>
								<div style="height: 403px; display:grid;align-items: center;justify-content: center;" class="">
									<img style="display: block;width: 120px;margin: 20px auto ;" src="{% static 'images/ui/time-management.png' %}" class="mb-0"/>
									<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No onboarding tasks are currently available." %}</h3>
								</div>
							</div>
						</div>
					{% endif %}


					<div
					class="col-12 col-sm-12 col-md-6 col-lg-5 oh-card-dashboard--moveable"
					>
						<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 Per Stage" %}</span>
								<span class="oh-card-dashboard__title float-end" id="chart1"><ion-icon name="caret-forward"></ion-icon></span>
							</div>
							<div class="oh-card-dashboard__body">
							{% if stage_chart_count %}
								<canvas id="recruitmentChart1" width="385" height="228"></canvas>
							{% else %}
								<div style="height: 362px; display:flex;align-items: center;justify-content: center;" class="">
									<div style="" class="">
										<img style="display: block;width: 120px;margin: 20px auto ;" src="{% static 'images/ui/interview.png' %}" class=""/>
										<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No recruitment stages currently available." %}</h3>
									</div>
								</div>
							{% endif %}
							</div>
						</div>
					</div>
				</div>

				<div class="oh-dashboard__movable-cards row mt-4">


					<div
					class="col-12 col-sm-12 col-md-6 col-lg-7 oh-card-dashboard--moveable"
					>
						<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 "Joinings Per Month" %}</span>
								<span class="oh-card-dashboard__title float-end" id="chart2"><ion-icon name="caret-forward"></ion-icon></span>

								<select class="oh-card-dashboard__body float-end me-3" id="year">
								</select>

							</div>
							{% if joining %}
								<canvas class="oh-card-dashboard__body" id="hiringChart"></div>
							{% else %}
							<div style="height: 430px; display:flex;align-items: center;justify-content: center;" class="">
								<div style="" class="">
									<img style="display: block;width: 115px;margin: 20px auto ;" src="{% static 'images/ui/joiningchart.png' %}" class=""/>
									<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No records were available." %}</h3>
								</div>
							</div>
							{% endif %}
						</div>

						{% if ongoing_recruitments %}
							<div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable">
								<div>
									<div class="oh-card-dashboard__header">
									<span class="oh-card-dashboard__title">{% trans "Current Hiring Pipeline" %}</span>
								</div>
								<div class="oh-sticky-table float-start" style="height:500px">
									<div class="oh-sticky-table__table">
										<div class="oh-sticky-table__thead">
											<div class="oh-sticky-table__tr">
												<div class="oh-sticky-table__th">{% trans "Job Positions" %}</div>
												<div class="oh-sticky-table__th">{% trans "Initial" %}</div>
												<div class="oh-sticky-table__th">{% trans "Test" %}</div>
												<div class="oh-sticky-table__th">{% trans "Interview" %}</div>
												<div class="oh-sticky-table__th">{% trans "Hired" %}</div>
												<div class="oh-sticky-table__th">{% trans "Cancelled" %}</div>
											</div>
										</div>
										<div class="oh-sticky-table__tbody">

											{% for job_item in job_data %}

											<div class="oh-sticky-table__tr">
											<div class="oh-sticky-table__sd">{{ job_item.0 }}</div>
											<div class="oh-sticky-table__td">{{ job_item.1 }}</div>
											<div class="oh-sticky-table__td">{{ job_item.2 }}</div>
											<div class="oh-sticky-table__td">{{ job_item.3 }}</div>
											<div class="oh-sticky-table__td">{{ job_item.4 }}</div>
											<div class="oh-sticky-table__td">{{ job_item.5 }}</div>
											</div>

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

				</div>


				<div class="oh-dashboard__movable-cards row mt-4 mb-5">
					{% if ongoing_recruitments %}
						<div class="col-12 col-sm-12 col-md-12 col-lg-6	 oh-card-dashboard--moveable">
							<div class="oh-card-dashboard__header">
								<span class="oh-card-dashboard__title">{% trans "Ongoing Recruitments & Hiring Managers" %}</span>
							</div>
							<div class="oh-sticky-table float-start" style="height:200px">
								<div class="oh-sticky-table__table">
									<div class="oh-sticky-table__thead">
										<div class="oh-sticky-table__tr">
											<div class="oh-sticky-table__th">{% trans "Recruitment" %}</div>
											<div class="oh-sticky-table__th">{% trans "Manager" %}</div>
										</div>
									</div>
									<div class="oh-sticky-table__tbody">

										{% for recruitment_title, managers in recruitment_manager_mapping.items %}

										<div class="oh-sticky-table__tr">
											<div class="oh-sticky-table__sd">{{ recruitment_title }}</div>
											<div class="oh-sticky-table__td">{{ managers|join:",  " }}</div>
										</div>

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

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

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

<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
<script src="{% static 'dashboard/joiningChart.js' %}"></script>
<script src="{% static 'dashboard/vacancyChart.js' %}"></script>
<script src="{% static 'dashboard/candidateChart.js' %}"></script>



<script>
  var selectyear = document.getElementById("year");
  var currentYear = new Date().getFullYear();

  // Populate the dropdown with years from 2000 to the current year
  for (var year = 2000; year <= currentYear; year++) {
    var option = document.createElement("option");
    option.value = year;
    option.text = year;
    // Set the default value to the current year
    if (year === currentYear) {
      option.selected = true;
    }
    selectyear.appendChild(option);
  }


  document.addEventListener("DOMContentLoaded", function() {
		const icon = document.getElementById('offerhelptext');
		icon.addEventListener('click', function(event) {
			acceptance_helptext(event); // Pass the event object to the acceptance_helptext function
		});
	});

function acceptance_helptext(event) {
    event = event || window.event;
    const icon = event.target || event.srcElement;
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.textContent = 'Offer Acceptance Rate = ( Onboarding candidates / Total Hired Candidates ) * 100'; // Help text

    // Position the tooltip relative to the icon
    const rect = icon.getBoundingClientRect();
    tooltip.style.top = rect.top + icon.offsetHeight + 'px';
    tooltip.style.left = rect.left + 'px';

    // Append tooltip to the body
    document.body.appendChild(tooltip);

    // Remove tooltip when mouse is moved away from the icon
    icon.addEventListener('mouseout', function () {
        document.body.removeChild(tooltip);
    });
}


document.addEventListener("DOMContentLoaded", function() {
	const icon = document.getElementById('conversionhelptext');
	icon.addEventListener('click', function(event) {
		conversion_helptext(event); // Pass the event object to the conversion_helptext function
	});
});

function conversion_helptext(event) {
	event = event || window.event;
	const icon = event.target || event.srcElement;
	const tooltip = document.createElement('div');
	tooltip.className = 'tooltip';
	tooltip.textContent = 'Conversion Rate = ( Total Hired Candidates / Total Candidates ) * 100'; // Help text

	// Position the tooltip relative to the icon
	const rect = icon.getBoundingClientRect();
	tooltip.style.top = rect.top + icon.offsetHeight + 'px';
	tooltip.style.left = rect.left + 'px';

	// Append tooltip to the body
	document.body.appendChild(tooltip);

	// Remove tooltip when mouse is moved away from the icon
	icon.addEventListener('mouseout', function () {
		document.body.removeChild(tooltip);
	});
}


</script>

{% endblock content %}