{% load i18n %} {% load static %} {% load horillafilters %}

<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>
						{% if employee.dob %}
						<span class="oh-profile__info-value dateformat_changer">{{employee.dob}}</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="transgender-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="home-outline"></ion-icon>
							<span>{% trans "Address" %}</span>
						</span>
						{% if employee.address %}
						<span class="oh-profile__info-value mb-0">{{employee.address}}</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="flag-outline"></ion-icon>
							<span>{% trans "Country" %}</span>
						</span>
						{% if employee.country %}
						<span class="oh-profile__info-value"> {{employee.country}} </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="compass-outline"></ion-icon>
							<span>{% trans "State" %}</span>
						</span>
						{% if employee.state %}
						<span class="oh-profile__info-value"> {{employee.state}} </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="planet-outline"></ion-icon>
							<span>{% trans "City" %}</span>
						</span>
						{% if employee.city %}
						<span class="oh-profile__info-value"> {{employee.city}}</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="book-outline"></ion-icon>
							<span>{% trans "Qualification" %}</span>
						</span>
						{% if employee.qualification %}
						<span class="oh-profile__info-value">{{employee.qualification}}</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="briefcase-outline"></ion-icon>
							<span>{% trans "Experience" %}</span>
						</span>
						{% if employee.experience %}
						<span class="oh-profile__info-value">{{employee.experience}}</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="link-outline"></ion-icon>
							<span>{% trans "Maritial 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>
						{% if employee.children %}
						<span class="oh-profile__info-value"> {{employee.children}} </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="call-outline"></ion-icon>
							<span>{% trans "Emergency Contact" %}</span>
						</span>
						{% if employee.emergency_contact %}
						<span class="oh-profile__info-value">{{employee.emergency_contact}}</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="people-circle-outline"></ion-icon>
							<span>{% trans "Emergency Contact Name" %}</span>
						</span>
						{% if employee.emergency_contact_name %}
						<span class="oh-profile__info-value">
							{{employee.emergency_contact_name}}
						</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="finger-print-outline"></ion-icon>
							<span>{% trans "Emergency Contact Relation" %}</span>
						</span>
						{% if employee.emergency_contact_relation %}
						<span class="oh-profile__info-value">
							{{employee.emergency_contact_relation}}
						</span>
						{% else %}
						<span class="oh-profile__info-value">{% trans "None" %}</span>
						{% endif %}
					</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" data-target="#tab_2">
								<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 oh-tabs__content--active" id="tab_1">
						<div class="oh-card__header">
							<span class="oh-card__title oh-card__title--sm fw-bold 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>
											{% if employee.employee_work_info.department_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.department_id}}</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="time-outline"></ion-icon>
												<span>{% trans "Shift Information" %}</span>
											</span>
											{% if employee.employee_work_info.shift_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.shift_id}}</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="briefcase-outline"></ion-icon>
												<span>{% trans "Employee Type" %}</span>
											</span>
											{% if employee.employee_work_info.employee_type_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.employee_type_id}}</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="person-circle-outline"></ion-icon>
												<span>{% trans "Reporting Manager" %}</span>
											</span>
											{% if employee.employee_work_info.reporting_manager_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.reporting_manager_id}}</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 "Work Location" %}</span>
											</span>
											{% if employee.employee_work_info.location %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.location}}</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="calendar-outline"></ion-icon>
												<span>{% trans "End Date" %}</span>
											</span>
											{% if employee.employee_work_info.contract_end_date %}
											<span
												class="oh-profile__info-value dateformat_changer">{{employee.employee_work_info.contract_end_date}}</span>
											{% else %}
											<span class="oh-profile__info-value">{% trans "None" %}</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="briefcase-outline"></ion-icon>
												<span>{% trans "Job Position" %}</span>
											</span>
											{% if employee.employee_work_info.job_position_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.job_position_id}}</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="time-outline"></ion-icon>
												<span>{% trans "Work Type" %}</span>
											</span>
											{% if employee.employee_work_info.work_type_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.work_type_id}}</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="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>
											{% if employee.employee_work_info.company_id %}
											<span
												class="oh-profile__info-value">{{employee.employee_work_info.company_id}}</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="calendar-outline"></ion-icon>
												<span>{% trans "Joining Date" %}</span>
											</span>
											{% if employee.employee_work_info.date_joining %}
											<span
												class="oh-profile__info-value dateformat_changer">{{employee.employee_work_info.date_joining}}</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 "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"
													style="background-color: {{ i.color }};
																font-size: .8rem; padding: 4px 10px; border-radius: 18px; font-weight: 600; width: {{ tag_width }}em;">{{ 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" id="tab_2">
								{% 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-bold 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>
								{% if employee.employee_bank_details.bank_name %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.bank_name}}
								</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="location-outline"></ion-icon>
									<span>{% trans "Branch" %}</span>
								</span>
								{% if employee.employee_bank_details.branch %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.branch}}
								</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="map-outline"></ion-icon>
									<span>{% trans "Bank Address" %}</span>
								</span>
								{% if employee.employee_bank_details.address %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.address}}
								</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="information-outline"></ion-icon>
									<span>{% trans "Bank Code" %} #1</span>
								</span>
								{% if employee.employee_bank_details.any_other_code1 %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.any_other_code1}}
								</span>
								{% else %}
								<span class="oh-profile__info-value">{% trans "None" %}</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="information-circle-outline"></ion-icon>
									<span>{% trans "Account Number" %}</span>
								</span>
								{% if employee.employee_bank_details.account_number %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.account_number}}
								</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="information-outline"></ion-icon>
									<span>{% trans "Bank Code" %} #2</span>
								</span>
								{% if employee.employee_bank_details.any_other_code2 %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.any_other_code2}}
								</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="flag-outline"></ion-icon>
									<span>{% trans "Country" %}</span>
								</span>
								{% if employee.employee_bank_details.country %}
								<span class="oh-profile__info-value">
									{{employee.employee_bank_details.country}}
								</span>
								{% else %}
								<span class="oh-profile__info-value">{% trans "None" %}</span>
								{% endif %}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		{% endif %}

	</div>
</div>

<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>