{% extends 'index.html' %}
{% block content %}
{% load static i18n horillafilters basefilters%}
{% general_section as general_section %}
{% employee_section as employee_section %}
{% attendance_section as attendance_section %}
{% general_section_main as general_section_main %}


<h3 class="text-lg font-semibold mb-3">{% trans "Settings" %}</h3>

<div class="grid grid-cols-12 gap-4 h-full pe-2">
	<!-- Left Column: 6/12 -->
	<div class="col-span-12 lg:col-span-3 border-r border-dark-50 pe-4">
		<div class="bg-white rounded-md shadow-card p-3 h-full">
			<div class="accordion-wrapper space-y-2">
				<!-- Accordion Item -->
				{% if general_section_main %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="general"
					>
						{% trans "General" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								<li class="py-1">
									{% if general_section %}
										<a
											id="generalSettings"
											href="{% url 'general-settings' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "General Settings" %}
										</a>
									{% endif %}
								</li>
								{% if perms.auth.view_permission %}
								<li class="py-1">
									<a
										id="employeePermission"
										href="{% url 'employee-permission-assign' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Employee Permission" %}
									</a>
								</li>
								{% endif %}
								{% if perms.auth.view_group %}
								<li class="py-1">
									<a
										id="userGroup"
										href="{% url 'user-group-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "User Group" %}
									</a>
								</li>
								{% endif %}
								{% if perms.auth.view_permission %}
								<li class="py-1">
									<a
										id="defaultAccessibility"
										href="{% url 'user-accessibility' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Accessibility Restriction" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_company %}
								<li class="py-1">
									<a
										id="date"
										href="{% url 'date-settings' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Date & Time Format" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_tags or perms.employee.view_employeetag or perms.horilla_audit.view_audittag %}
								<li class="py-1">
									<a
										id="ticket_type"
										href="{% url 'tag-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "History Tags" %}</a
									>
								</li>
								{% endif %}
								{% if perms.base.view_dynamicemailconfiguration and not "outlook_auth"|app_installed %}
								<li class="py-1">
									<a
										id="date"
										href="{% url 'mail-server-conf' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Mail Server" %}
									</a>
								</li>
								{% elif perms.base.view_dynamicemailconfiguration and "outlook_auth"|app_installed %}
								<li class="py-1">
									<a
										id="date"
										href="{% url 'outlook_view_records' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Outlook Mail" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}

				<!-- Accordion Item -->
				{% if perms.base.view_department or perms.base.view_jobposition or perms.base.view_jobrole or perms.base.view_company %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="base"
					>
						{% trans "Base" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.base.view_department %}
								<li class="py-1">
									<a
										id="department"
										href="{% url 'department-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Department" %}</a
									>
								</li>
								{% endif %}
								{% if perms.base.view_jobposition %}
								<li class="py-1">
									<a
										id="jobPosition"
										href="{% url 'job-position-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Job Positions" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_jobrole %}
								<li class="py-1">
									<a
										id="jobRole"
										href="{% url 'job-role-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Job Role" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_company %}
								<li class="py-1">
									<a
										id="company"
										href="{% url 'company-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Company" %}</a
									>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}

				{% if "recruitment"|app_installed %}
				<!-- Accordion Item -->
				{% if perms.recruitment.view_recruitment or perms.recruitment.view_rejectreason or perms.recruitment.add_recruitment or perms.recruitment.add_linkedinaccount %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="recruitment"
					>
						{% trans "Recruitment" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.recruitment.view_recruitment %}
								<li class="py-1">
									<a
										id="skills"
										href="{% url 'self-tracking-feature' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Candidate Self Tracking" %}
									</a>
								</li>
								{% endif %}
								{% if perms.recruitment.view_rejectreason %}
								<li class="py-1">
									<a
										id="candidateRejectReasons"
										href="{% url 'candidate-reject-reasons' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Candidate Reject Reason" %}
									</a>
								</li>
								{% endif %}
								{% if perms.recruitment.add_recruitment %}
								<li class="py-1">
									<a
										id="skills"
										href="{% url 'skills-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Skills" %}</a
									>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% endif %}

				{% if employee_section %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="employee"
					>
						{% trans "Employee" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.base.view_worktype %}
								<li class="py-1">
									<a
										id="workType"
										href="{% url 'work-type-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Work Type" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_rotatingworktype %}
								<li class="py-1">
									<a
										id="rotatingWorkType"
										href="{% url 'rotating-work-type-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Rotating Work Type" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_employeeshift %}
								<li class="py-1">
									<a
										id="employeeShift"
										href="{% url 'employee-shift-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Employee Shift" %}</a
									>
								</li>
								{% endif %}
								{% if perms.base.view_rotatingshift %}
								<li class="py-1">
									<a
										id="rotatingShift"
										href="{% url 'rotating-shift-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Rotating Shift" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_employeeshiftschedule %}
								<li class="py-1">
									<a
										id="employeeShiftSchedule"
										href="{% url 'employee-shift-schedule-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Employee Shift Schedule" %}
									</a>
								</li>
								{% endif %}
								{% if perms.base.view_employeetype %}
								<li class="py-1">
									<a
										id="employeeType"
										href="{% url 'employee-type-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Employee Type" %}
									</a>
								</li>
								{% endif %}
								{% if perms.employee.view_actiontype %}
								<li class="py-1">
									<a
										id="date"
										href="{% url 'action-type' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Disciplinary Action Type" %}
									</a>
								</li>
								{% endif %}
								{% if perms.employee.view_employeetag %}
								<li class="py-1">
									<a
										id="ticket_type"
										href="{% url 'employee-tag-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Employee Tags" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}

				{% if "attendance"|app_installed and attendance_section%}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="attendance"
					>
						{% trans "Attendance" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.attendance.view_attendancevalidationcondition %}
								<li class="py-1">
									<a
										id="trackLateComeEalryOut"
										href="{% url 'track-late-come-early-out' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Track Late Come & Early Out" %}
									</a>
								</li>
								{% endif %}
								{% if perms.attendance.view_attendancevalidationcondition %}
								<li class="py-1">
									<a
										id="condition"
										href="{% url 'attendance-settings-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Attendance Break Point" %}
									</a>
								</li>
								{% endif %}
								{% if perms.attendance.view_attendancevalidationcondition %}
								<li class="py-1">
									<a
										id="condition"
										href="{% url 'check-in-check-out-setting' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Check In/Check Out" %}
									</a>
								</li>
								{% endif %}
								{% if perms.attendance.view_attendancevalidationcondition %}
								<li class="py-1">
									<a
										id="condition"
										href="{% url 'grace-settings-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Grace Time" %}
									</a>
								</li>
								{% endif %}
								{% if biometric_app_exists %}
								{% if perms.base.view_biometricattendance %}
									<li class="py-1">
										<a
											id="condition"
											href="{% url 'enable-biometric-attendance' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "Biometric Attendance" %}
										</a>
									</li>
									{% endif %}
								{% endif %}
								{% if perms.attendance.add_attendance %}
								<li class="py-1">
									<a
										id="ip_resriction"
										href="{% url 'allowed-ips' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "IP Restriction" %}
									</a>
								</li>
								{% endif %}
								{% if perms.geofencing.add_geofencing or perms.facedetection.add_facedetection %}
								<li class="py-1">
									<a
										id="geo_face_conf"
										href="{% url 'geo-face-config' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Geo & Face Config" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% if "leave"|app_installed %}
				{% if perms.leave.add_restrictleave or perms.attendance.view_attendancevalidationcondition %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="leave"
					>
						{% trans "Leave" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.attendance.view_attendancevalidationcondition %}
								<li class="py-1">
									<a
										id="condition"
										href="{% url 'employee-past-leave-restriction' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Restrictions" %}
									</a>
								</li>
								{% endif %}
								{% if "attendance"|app_installed %}
									{% if perms.attendance.view_attendancevalidationcondition %}
									<li class="py-1">
										<a
											id="condition"
											href="{% url 'compensatory-leave-settings-view' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "Compensatory Leave" %}
										</a>
									</li>
									{% endif %}
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% endif %}
				{% if "payroll"|app_installed and perms.payroll.view_payslipautogenerate %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="payroll"
					>
						{% trans "Payroll" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.payroll.view_payslipautogenerate %}
								<li class="py-1">
									<a
										id="autoGeneratePayslip"
										href="{% url 'auto-payslip-settings-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Payslip Auto Generation" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% if "pms"|app_installed and perms.pms.add_bonuspointsetting %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="performance"
					>
						{% trans "Performance" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.pms.add_bonuspointsetting %}
								<li class="py-1">
									<a
										id="bonusPoint"
										href="{% url 'bonus-point-setting' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Bonus Point Setting" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% if "helpdesk"|app_installed %}
				{% if perms.helpdesk.view_departmentmanager or perms.helpdesk.view_tickettype or perms.helpdesk.view_tag %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="helpdesk"
					>
						{% trans "Help Desk" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.helpdesk.view_departmentmanager %}
								<li class="py-1">
									<a
										id="department_manager"
										href="{% url 'department-manager-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Department Managers" %}
									</a>
								</li>
								{% endif %}
								{% if perms.helpdesk.view_tickettype %}
								<li class="py-1">
									<a
										id="ticket_type"
										href="{% url 'ticket-type-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Ticket Type" %}
									</a>
								</li>
								{% endif %}
								{% if perms.helpdesk.view_tag %}
								<li class="py-1">
									<a
										id="help_desk"
										href="{% url 'helpdesk-tag-view' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Helpdesk Tags" %}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
					</div>
				</div>
				{% endif %}
				{% endif %}
				{% if "horilla_theme"|app_installed and perms.horilla_theme.view_horillacolortheme %}
					<div class="accordion-item border border-primary-300 rounded-md overflow-hidden">
						<button
							class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
							data-id="horilla_theme">
							{% trans "Theme Manager" %}
							<span class="icon text-xl font-bold">+</span>
						</button>
						<div
							class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700">
							<div class="py-3">
								<ul>
									<li class="py-1">
										<a id="bonusPoint" href="{% url 'horilla_theme:color_theme_view' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]">
											{% trans "Color Theme" %}
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				{% endif %}
				{% if perms.horilla_backup.view_googledrivebackup or perms.recruitment.view_linkedinaccount or perms.horilla_ldap.add_ldapsettings or perms.horilla_ldap.update_ldapsettings or perms.horilla_meet.view_googlecloudcredential or perms.whatsapp.add_whatsappcredentials %}
				<div
					class="accordion-item border border-primary-300 rounded-md overflow-hidden"
				>
					<button
						class="accordion-btn-stng font-medium w-full flex justify-between items-center px-3 py-1 bg-primary-200 text-primary-600 text-[13px] transition-all"
						data-id="whatsapp"
					>
						{% trans "Integrations" %}
						<span class="icon text-xl font-bold">+</span>
					</button>
					<div
						class="accordion-panel max-h-0 overflow-hidden transition-all duration-300 bg-white px-4 text-sm text-gray-700"
					>
						<div class="py-3">
							<ul>
								{% if perms.horilla_backup.view_googledrivebackup %}
									<li class="py-1">
										<a
											id="date"
											href="{% url 'gdrive' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "Gdrive Backup" %}
										</a>
									</li>
								{% endif %}

								{% if perms.recruitment.view_linkedinaccount %}
								<li class="py-1">
									<a
										id="linkedin"
										href="{% url 'linkedin-integration-setting' %}"
										class="hover:text-primary-600 transition duration-300 text-[13px]"
										>{% trans "Linkedin" %}
									</a>
								</li>
								{% endif %}

								{% if "horilla_ldap"|app_installed %}
									{% if perms.horilla_ldap.add_ldapsettings or perms.horilla_ldap.update_ldapsettings %}
									<li class="py-1">
										<a
											id="ldap"
											href="{% url 'ldap-settings' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "LDAP" %}
										</a>
									</li>
									{% endif %}
								{% endif %}

								{% if "horilla_meet"|app_installed %}
									{% if perms.horilla_meet.view_googlecloudcredential %}
									<li class="py-1">
										<a
											id="google_meet"
											href="{% url 'gmeet-setting' %}"
											class="hover:text-primary-600 transition duration-300 text-[13px]"
											>{% trans "Google Meet" %}</a
										>
									</li>
									{% endif %}
								{% endif %}

								{% if "whatsapp"|app_installed %}
									{% if perms.whatsapp.add_whatsappcredentials %}
										<li class="py-1">
											<a
												id="whatsapp_credentials"
												href="{% url 'whatsapp-credential-view' %}"
												class="hover:text-primary-600 transition duration-300 text-[13px]"
												>{% trans "Whatsapp" %}</a
											>
										</li>
									{% endif %}
								{% endif %}

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

	<!-- Right Column: 6/12 -->
	<div class="col-span-12 lg:col-span-9">
		<div class="bg-white rounded-md shadow-card p-3">
			<div
				class="h-[calc(100vh_-_190px)] overflow-hidden overflow-y-auto overflow-x-auto"
			>
				{% block settings %} {% endblock settings %}
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {
		$("select").removeClass("select2-hidden-accessible");
		$('select[name="tracking_fields"]').css("height", "50px");
	});
</script>
<script>
	$(function () {
		$(".accordion-btn-stng").on("click", function (e) {
			e.preventDefault();
			const $button = $(this);
			const $panel = $button.next(".accordion-panel");
			const panelId = $button.data("id");

			if ($panel.hasClass("max-h-0")) {
				$(".accordion-panel")
					.addClass("max-h-0")
					.removeClass("max-h-[9999px]");
				$(".accordion-btn-stng .icon").text("+");

				$panel.removeClass("max-h-0").addClass("max-h-[9999px]");
				$button.find(".icon").text("-");

				localStorage.setItem("openAccordion", panelId);
			} else {
				$panel.addClass("max-h-0").removeClass("max-h-[9999px]");
				$button.find(".icon").text("+");
				localStorage.removeItem("openAccordion");
			}
		});

		const openPanel = localStorage.getItem("openAccordion");
		if (openPanel) {
			const $button = $(`.accordion-btn-stng[data-id="${openPanel}"]`);
			const $panel = $button.next(".accordion-panel");
			$panel.removeClass("max-h-0").addClass("max-h-[9999px]");
			$button.find(".icon").text("-");
		}
	});
</script>

{% endblock content %}