{% extends 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Profile'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ '/'|alink }}">
				<svg class="icon">
					<use xlink:href="#home"/>
				</svg>
			</a>
		</li>
		<li class="breadcrumb-item">
			<a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
		</li>
		<li class="breadcrumb-item">
			<a href="{{ 'extension/settings/staff'|alink }}">{{ 'Staff'|trans }}</a>
		</li>
		<li class="breadcrumb-item active" aria-current="page">{{ staff.name }}</li>
	</ol>
{% endblock %}

{% block content %}
	{% if staff.role == 'cron' %}
		<div class="alert alert-info" role="alert" id="external-ip">
			{{ 'This staff member is used by FOSSBilling to perform system tasks and cannot be removed.'|trans }}
		</div>
	{% endif %}

	<div class="card-tabs">
		<ul class="nav nav-tabs" role="tablist">
			<li class="nav-item" role="presentation">
				<a class="nav-link active" href="#tab-profile" data-bs-toggle="tab">{{ 'Profile'|trans }}</a>
			</li>
			<li class="nav-item" role="presentation" data-bs-toggle="tab">
				<a class="nav-link" href="#tab-permissions" data-bs-toggle="tab">{{ 'Permissions'|trans }}</a>
			</li>
			<li class="nav-item" role="presentation">
				<a class="nav-link" href="#tab-password" data-bs-toggle="tab">{{ 'Password'|trans }}</a>
			</li>
		</ul>

		<div class="card">
			<div class="tab-content">
				<div class="tab-pane fade show active" id="tab-profile" role="tabpanel">
					<div class="card-header">
						<h3 class="card-title">{{ 'Manage staff member details'|trans }}</h3>
					</div>

					<form method="post" action="admin/staff/update" class="api-form" data-api-msg="{{ 'Staff member details updated.'|trans }}">
						<input type="hidden" name="id" value="{{ staff.id }}">
						<div class="card-body">
							<input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
							<div class="mb-3 row">
								<label class="form-label col-3 col-form-label">{{ 'Group'|trans }}</label>
								<div class="col">
									{{ mf.selectbox('admin_group_id', admin.staff_group_get_pairs, staff.group.id, 1) }}
								</div>
							</div>
							<div class="mb-3 row">
								<label class="form-label col-3 col-form-label" for="inputName">{{ 'Name'|trans }}</label>
								<div class="col">
									<input class="form-control" id="inputName" type="text" name="name" value="{{ staff.name }}" required>
								</div>
							</div>
							<div class="mb-3 row">
								<label class="form-label col-3 col-form-label" for="inputEmail">{{ 'Email'|trans }}</label>
								<div class="col">
									<input class="form-control" id="inputEmail" type="text" name="email" value="{{ staff.email }}" required>
								</div>
							</div>
							<div class="mb-3 row">
								<label class="form-label col-3 col-form-label">{{ 'Status'|trans }}</label>
								<div class="col">
									<div class="form-check form-check-inline">
										<input class="form-check-input" id="radioStatusActive" type="radio" name="status" value="active" {% if staff.status == 'active' %} checked {% endif %}>
										<label class="form-check-label" for="radioStatusActive">{{ 'Active'|trans }}</label>
									</div>
									<div class="form-check form-check-inline">
										<input class="form-check-input" id="radioStatusInactive" type="radio" name="status" value="inactive" {% if staff.status == 'inactive' %} checked {% endif %}>
										<label class="form-check-label" for="radioStatusInactive">{{ 'Inactive'|trans }}</label>
									</div>
								</div>
							</div>
							<div class="mb-3 row">
								<label class="form-label col-3 col-form-label" for="textareaSignature">{{ 'Signature'|trans }}</label>
								<div class="col">
									<textarea class="form-control" id="textareaSignature" name="signature" rows="2">{{staff.signature}}</textarea>
								</div>
							</div>
						</div>

						<div class="card-footer text-end">
							<input class="btn btn-primary" type="submit" value="{{ 'Update details'|trans }}">
						</div>
					</form>
				</div>

				<div class="tab-pane fade" id="tab-permissions" role="tabpanel">
					<div class="card-header">
						<h3 class="card-title">{{ 'Permissions for: '|trans }}
							{{ staff.name }}</h3>
						{% if staff.role != 'admin' %}
							<div class="card-actions">
								<button class="btn btn-secondary btn-md d-inline" onclick="toggleAll(true);">{{ 'Grant all permissions'|trans }}</button>
								<button class="btn btn-danger btn-md d-inline" onclick="toggleAll(false);">{{ 'Revoke all permissions'|trans }}</button>
							</div>
						{% endif %}
					</div>

					<div class="card-body">
						{% if staff.role == 'admin' %}
							<div class="alert alert-success d-flex align-items-center" role="alert">
								<svg class="icon" style="width:24px;height:24px;"><use xlink:href="#check"/></svg>
								<div>
									<strong>{{ 'Full Access Granted'|trans }}</strong><br>
									{{ 'This administrator has unrestricted access to all system modules and actions.'|trans }}
								</div>
							</div>

							<ul class="list-group mt-3">
								<li class="list-group-item d-flex align-items-center">
									<svg class="icon text-success me-2" style="width:20px;height:20px;"><use xlink:href="#check"/></svg>
									{{ 'Can manage staff and assign permissions'|trans }}
								</li>
								<li class="list-group-item d-flex align-items-center">
									<svg class="icon text-success me-2" style="width:20px;height:20px;"><use xlink:href="#check"/></svg>
									{{ 'Can access all client and billing records'|trans }}
								</li>
								<li class="list-group-item d-flex align-items-center">
									<svg class="icon text-success me-2" style="width:20px;height:20px;"><use xlink:href="#check"/></svg>
									{{ 'Can configure system settings and modules'|trans }}
								</li>
							</ul>

							<div class="mt-3 text-muted">
								<small>{{ 'Administrators cannot have their permissions restricted.'|trans }}</small>
							</div>
						{% else %}

							{% set prms = admin.staff_permissions_get({ 'id': staff.id }) %}
							<form method="post" action="admin/staff/permissions_update" class="api-form" data-api-msg="{{ 'Permissions updated'|trans }}">
								<input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
								<input type="hidden" name="permissions[default]" value="">

								{% for modName, mod in mods|filter(mod => mod.permissions.hide_permissions is not true) %}
									<div class="row">
										<div class="col-1"></div>
										<div class="col-2">
											<h3 class="float-right text-capitalize mt-1">{{ modName }}</h3>
										</div>
										<div class="col-4">
											{% if not mod.permissions.can_always_access %}
												<div class="mt-2 form-check">
													<input class="form-check-input permission-box" id="input-{{ modName }}" type="checkbox" name="permissions[{{ modName }}][access]" value="1" {% if prms[modName] %} checked {% endif %}>
													<label class="form-check-label" for="input-{{ modName }}">{{ 'Module access'|trans }}
														<svg class="icon" data-bs-toggle="tooltip" data-bs-title="{{ 'Can be disabled to prevent the staff member from using any part of this module.'|trans }}" data-bs-placement="right"><use xlink:href="#info"/></svg>
													</label>
												</div>
											{% endif %}

											{% for permissionName, permission in mod.permissions %}
												<div class="form-group">
													{% if permission.type == 'bool' %}
														<div class="mt-2 form-check">
															<input class="form-check-input permission-box" id="input-{{ modName }}-{{ permissionName }}" type="checkbox" name="permissions[{{ modName }}][{{ permissionName }}]" value="1" {% if prms[modName][permissionName] %} checked {% endif %}>
															<label class="form-check-label" for="input-{{ modName }}-{{ permissionName }}">{{ permission.display_name }}
																<svg class="icon" data-bs-toggle="tooltip" data-bs-title="{{ permission.description }}" data-bs-placement="right"><use xlink:href="#info"/></svg>
															</label>
														</div>
													{% endif %}

													{% if permission.type == 'select' %}
														<div class="row">
															<div class="col-3">
																<div class="d-flex align-items-center">
																	<label for="input-{{ modName }}-{{ permissionName }}" class="mt-2 text-nowrap" style="margin-right: 10px; margin-left: 5px;">{{ permission.display_name }}</label>
																	<select class="form-control mt-2 permission-select" name="permissions[{{ modName }}][{{ permissionName }}]" style="margin-right: 5px;">
																		<option value="">{{ 'None'|trans }}</option>
																		{% for optionName, option in permission.options %}
																			<option value="{{ optionName }}" {% if prms[modName][permissionName] == optionName %} selected {% endif %}>
																		{{ option }}
																	</option>
																{% endfor %}
															</select>
															<svg class="icon mt-2" data-bs-toggle="tooltip" data-bs-title="{{ permission.description }}" data-bs-placement="right" style="width: 32px; height: 32px;"><use xlink:href="#info"/></svg>
														</div>
													</div>
												</div>
											{% endif %}
										</div>
									{% endfor %}
									<hr class="mt-4 mb-4"/>
								</div>
							</div>
						{% endfor %}

						<input type="hidden" name="id" value="{{ staff.id }}">

						<div class="card-footer">
							<input type="submit" value="{{ 'Save'|trans }}" class="btn btn-primary w-100">
						</div>
					</form>
				{% endif %}
			</div>
		</div>

		<div class="tab-pane fade" id="tab-password" role="tabpanel">
			<div class="card-header">
				<h3 class="card-title">{{ 'Change staff member password'|trans }}</h3>
			</div>
			<form method="post" action="admin/staff/change_password" class="api-form" data-api-msg="{{ 'Staff member password changed'|trans }}">
				<input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
				<div class="card-body">
					<div class="mb-3 row">
						<label class="form-label col-3 col-form-label" for="inputPassword">{{ 'Password'|trans }}</label>
						<div class="col">
							<input class="form-control" id="inputPassword" type="password" name="password" required>
						</div>
					</div>
					<div class="mb-3 row">
						<label class="form-label col-3 col-form-label" for="inputPasswordConfirm">{{ 'Password confirmation'|trans }}</label>
						<div class="col">
							<input class="form-control" id="inputPasswordConfirm" type="password" name="password_confirm" required>
						</div>
					</div>

					<input type="hidden" name="id" value="{{ staff.id }}">
				</div>
				<div class="card-footer text-end">
					<input type="submit" value="{{ 'Submit'|trans }}" class="btn btn-primary">
				</div>
			</form>
		</div>
	</div>
</div>
{% endblock %}

{% block js%}
<script>
	function toggleAll(check) {
		const elements = document.getElementsByClassName('permission-box');
		Array.from(elements).forEach((element) => {
			if (element.dataset.alwaysGiven) {
				element.checked = true;
			} else {
				element.checked = check;
			};
		});
	};
</script>
{% endblock %}
