{% load i18n %} {% load static %} {% load horillafilters %}
<div class="profile_details_right">
	<div class="row">
		<div class="col-sm-12 col-md-12 col-lg-4">
			<div class="oh-card oh-card--margin bg-new">
				<div class="oh-card__header">
					<span class="oh-card__title oh-card__title--sm fw-medium 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">{{employee.get_employee_dob|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="female-outline"></ion-icon>
								<span>{% trans "Gender" %}</span>
							</span>
							<span class="oh-profile__info-value">{% trans employee.get_gender_display %}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="location-outline"></ion-icon>
								<span>{% trans "Address" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.address|default:_("None")}}</span>
						</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">{{employee.country|default:_("None")}}</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">{{employee.state|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="planet-outline"></ion-icon>
								<span>{% trans "City" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.city|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="ribbon-outline"></ion-icon>
								<span>{% trans "Qualification" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.qualification|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="bulb-outline"></ion-icon>
								<span>{% trans "Experience" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.experience|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="heart-outline"></ion-icon>
								<span>{% trans "Marital Status" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.get_marital_status_display}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="person-circle-outline"></ion-icon>
								<span>{% trans "Children" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.children|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="call-outline"></ion-icon>
								<span>{% trans "Emergency Contact" %}</span>
							</span>
							<span class="oh-profile__info-value">{{employee.emergency_contact|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="person-outline"></ion-icon>
								<span>{% trans "Emergency Contact Name" %}</span>
							</span>
							<span
								class="oh-profile__info-value">{{employee.emergency_contact_name|default:_("None")}}</span>
						</li>

						<li class="oh-profile__card-info-item">
							<span class="oh-profile__info-label mb-1">
								<ion-icon name="finger-print-outline"></ion-icon>
								<span>{% trans "Emergency Contact Relation" %}</span>
							</span>
							<span
								class="oh-profile__info-value">{{employee.emergency_contact_relation|default:_("None")}}</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-tabs">
					<ul class="oh-tabs__tablist">
						<!-- <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#tab_1">
							<div>
								<img src="{% static 'images/ui/work-info.png' %}" alt=""
									style="width: 25px; height: 25px; margin-right: 3px;opacity: 0.7" />
								{% trans "Work Information" %}
							</div>
						</li> -->
						{% if "payroll"|app_installed %}
							{% if perms.employee.view_employee or perms.payroll.view_contract or request.user == employee.employee_user_id %}
								<!-- <li class="oh-tabs__tab">
									<div>
										<img src="{% static 'images/ui/contract.png' %}" alt=""
											style="width: 25px; height: 25px; margin-right: 3px" />
										{% trans "Contract details" %}
									</div>
								</li> -->
							{% endif %}
						{% endif %}
					</ul>
					<div class="oh-tabs__contents" id="view-container">
						<div class="oh-tabs__content">
							<div class="oh-card__header">
								<span class="oh-card__title oh-card__title--sm fw-medium me-2">{% trans "Work 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 "Department" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.department_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="time-outline"></ion-icon> -->
													<span>{% trans "Shift Information" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.shift_id|default:_("None")}}</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 "Employee Type" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.employee_type_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="person-circle-outline"></ion-icon> -->
													<span>{% trans "Reporting Manager" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.reporting_manager_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="business-outline"></ion-icon> -->
													<span>{% trans "Work Location" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.location|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="calendar-outline"></ion-icon> -->
													<span>{% trans "End Date" %}</span>
												</span>
												<span
													class="oh-profile__info-value dateformat_changer">{{employee.employee_work_info.contract_end_date|default:_("None")}}</span>
											</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="briefcase-outline"></ion-icon> -->
													<span>{% trans "Job Position" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.job_position_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="time-outline"></ion-icon> -->
													<span>{% trans "Work Type" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.work_type_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="cash-outline"></ion-icon> -->
													<span>{% trans "Salary" %}</span>
												</span>
												{% if employee.employee_work_info.basic_salary %}
													<span class="oh-profile__info-value">
														{% if perms.employee.view_employee or request.user == employee.employee_user_id %}
															{{employee.employee_work_info.basic_salary}}
														{% else %}
															**********
														{% endif %}
													</span>
												{% else %}
													<span class="oh-profile__info-value">{% trans "None" %}</span>
												{% endif %}
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="business-outline"></ion-icon> -->
													<span>{% trans "Company" %}</span>
												</span>
												<span
													class="oh-profile__info-value">{{employee.employee_work_info.company_id|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="calendar-outline"></ion-icon> -->
													<span>{% trans "Joining Date" %}</span>
												</span>
												<span
													class="oh-profile__info-value dateformat_changer">{{employee.employee_work_info.date_joining|default:_("None")}}</span>
											</li>

											<li class="oh-profile__card-info-item">
												<span class="oh-profile__info-label mb-1">
													<!-- <ion-icon name="business-outline"></ion-icon> -->
													<span>{% trans "Tags" %}</span>
												</span>
												<div style="display: flex; flex-wrap: wrap;">
													{% if employee.employee_work_info.tags.all %}
														{% for i in employee.employee_work_info.tags.all %}
															{% with tag_width=i.title|length %}
															<span class="oh-profile__info-value mt-1 mb-1 mr-1 bg-y"
																style="font-size: .8rem; padding: 4px 10px; border-radius: 18px; font-weight: 600;">{{ i.title }}</span>
															{% endwith %}
														{% endfor %}
													{% else %}
													<span class="oh-profile__info-value dateformat_changer">{% trans "None" %}</span>
													{% endif %}
												</div>
											</li>

										</ul>
									</div>
								</div>
							</div>
						</div>
						{% if perms.employee.view_employee or perms.payroll.view_contract or request.user == employee.employee_user_id %}
							{% if "payroll"|app_installed %}
								<div class="oh-tabs__content">
									<div class="oh-card__header">
										<span class="oh-card__title oh-card__title--sm fw-medium me-2">{% trans "Contract details" %}</span>
									</div>
									{% include "tabs/contract-tab.html" %}
								</div>
							{% endif %}
						{% endif %}
					</div>
				</div>
			</div>
			{% if perms.employee.view_employeebankdetails or request.user == employee.employee_user_id %}
				<div class="oh-card oh-card--margin">
					<div class="oh-card__header">
						<span class="oh-card__title oh-card__title--sm fw-medium me-2">{% trans "Bank 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="business-outline"></ion-icon> -->
											<span>{% trans "Bank Name" %}</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.bank_name|default:_("None")}}</span>
									</li>

									<li class="oh-profile__card-info-item">
										<span class="oh-profile__info-label mb-1">
											<!-- <ion-icon name="location-outline"></ion-icon> -->
											<span>{% trans "Branch" %}</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.branch|default:_("None")}}</span>
									</li>

									<li class="oh-profile__card-info-item">
										<span class="oh-profile__info-label mb-1">
											<!-- <ion-icon name="map-outline"></ion-icon> -->
											<span>{% trans "Bank Address" %}</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.address|default:_("None")}}</span>
									</li>

									<li class="oh-profile__card-info-item">
										<span class="oh-profile__info-label mb-1">
											<!-- <ion-icon name="information-outline"></ion-icon> -->
											<span>{% trans "Bank Code" %} #2</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.any_other_code2|default:_("None")}}</span>
									</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="information-circle-outline"></ion-icon> -->
											<span>{% trans "Account Number" %}</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.account_number|default:_("None")}}</span>
									</li>

									<li class="oh-profile__card-info-item">
										<span class="oh-profile__info-label mb-1">
											<!-- <ion-icon name="information-outline"></ion-icon> -->
											<span>{% trans "Bank Code" %} #1</span>
										</span>
										<span
											class="oh-profile__info-value">{{employee.employee_bank_details.any_other_code1|default:_("None")}}</span>
									</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">{{employee.employee_bank_details.country|default:_("None")}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
</div>

<style>
.profile_details_right .oh-card {border: none;background-color: transparent;}
.profile_details_right .oh-card.bg-new {background-color: #FBFDFF;border: solid 1px #F4F9FF;border-radius: 3px;padding: 30px;}
.profile_details_right .oh-tabs {border: none;background-color: transparent;}
.profile_details_right .oh-card__title--sm {font-size: 1.5rem;}
.profile_details_right .oh-profile__card-info-item {display: flex;flex-direction: row;margin-bottom: .8rem;}
.profile_details_right .oh-card.bg-new .oh-profile__card-info-item {margin-bottom: 1.5rem;}
.profile_details_right .oh-profile__card-info-item .oh-profile__info-label {color: #646665;font-weight: 500;width: 50%;}
.profile_details_right .oh-profile__card-info-item .oh-profile__info-value {color: #8B9094;width: 50%;}
.profile_details_right .oh-card.bg-new .oh-profile__card-info-item .oh-profile__info-label {width: 60%;}
.profile_details_right .oh-card.bg-new .oh-profile__card-info-item .oh-profile__info-value {text-align: right;width: 40%;}
.profile_details_right .oh-tabs__content {display: block !important;}
.profile_details_right #profile-view .oh-sticky-table {max-height: 100%;}
.profile_details_right .height-adj {height: auto;}
.profile_details_right .oh-btn-group .oh-btn {padding: 10px 10px;border-radius: 0;}
.profile_details_right .oh-btn-group .oh-btn .md.hydrated {margin: 0;}
.profile_details_right .oh-btn-group .oh-btn:focus {outline: none;}
.profile_details_right .oh-btn-group .oh-btn:hover {background: #cecdcd !important;}
.profile_details_right .oh-sticky-table__th {font-size: 15px;font-weight: 500;background: #F0F4F9;border-right: none;padding: 0.5rem 1.5rem !important;}
.profile_details_right .oh-sticky-table__th + .oh-sticky-table__th {border-left: 1px solid #E0E9F4;}
.profile_details_right .oh-sticky-table__td:first-child {width: 240px;}
.profile_details_right .oh-sticky-table__tr .oh-sticky-table__sd:nth-child(1) {border-radius: 0;padding: 0.5rem 1.5rem !important;border-left: none;border-right: 1px solid #E0E9F4;}
.profile_details_right .oh-sticky-table__td {padding: 0.5rem 1.5rem !important;border-left: 1px solid #E0E9F4;}
.profile_details_right .oh-sticky-table__thead div.oh-sticky-table__th:first-child {border-right: 1px solid #E0E9F4;width: 240px;}
.profile_details_right .oh-profile__card-info-item .oh-profile__info-value.bg-y {background-color: #FFF5D8;color: #FDB249;width: fit-content !important;}
</style>



<script>
	$(document).ready(function () {
		$(".oh-tabs__tab[data-target]").click(function (e) {
			e.preventDefault();
			var newActiveTab = $(this).attr("data-target");
			$(".oh-tabs__content--active").toggleClass("oh-tabs__content--active");
			$(".oh-tabs__tab--active").toggleClass("oh-tabs__tab--active");
			$(`[data-target="${newActiveTab}"]`).toggleClass("oh-tabs__tab--active");
			$(newActiveTab).toggleClass("oh-tabs__content--active");
		});
	});
</script>