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

{% block meta_title %}{{ staff.name }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ '/'|url }}">
				<svg class="icon">
					<use xlink:href="#home"/>
				</svg>
			</a>
		</li>
		<li class="breadcrumb-item">
			<a href="{{ 'system'|url }}">{{ 'Settings'|trans }}</a>
		</li>
		<li class="breadcrumb-item">
			<a href="{{ 'extension/settings/staff'|url }}">{{ '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 %}

	{% embed 'partial_admin_detail_tabs.html.twig' with {
		title: staff.name,
		subtitle: 'Manage the staff profile, permissions, and password for this administrator account.'|trans
	} %}
		{% block detail_tabs %}
						<li class="nav-item" role="presentation">
							<a class="nav-link active" href="#tab-profile" data-bs-toggle="tab" role="tab">{{ 'Profile'|trans }}</a>
						</li>
						<li class="nav-item" role="presentation">
							<a class="nav-link" href="#tab-permissions" data-bs-toggle="tab" role="tab">{{ 'Permissions'|trans }}</a>
						</li>
						<li class="nav-item" role="presentation">
							<a class="nav-link" href="#tab-password" data-bs-toggle="tab" role="tab">{{ 'Password'|trans }}</a>
						</li>
		{% endblock %}

		{% block detail_tab_content %}
			{% import 'macro_functions.html.twig' as mf %}
			<div class="tab-pane fade show active" id="tab-profile" role="tabpanel">
				<div class="p-3">
					<form method="post" action="admin/staff/update" {{ fb_api_form({message: 'Staff Member Details Updated'|trans}) }}>
						{% embed 'partial_admin_form_card.html.twig' with {
							title: 'Staff Member Details'|trans,
							subtitle: 'Update the staff member group, account identity, status, and signature.'|trans
						} %}
							{% import 'macro_functions.html.twig' as mf %}
							{% block form_content %}
								<div class="row g-3">
									<div class="col-lg-6">
										<label class="form-label">{{ 'Group'|trans }}</label>
										{{ mf.selectbox('admin_group_id', admin.staff_group_get_pairs, staff.group.id, 1) }}
									</div>
									<div class="col-lg-6">
										<label class="form-label" for="inputName">{{ 'Name'|trans }}</label>
										<input class="form-control" id="inputName" type="text" name="name" value="{{ staff.name }}" required>
									</div>
									<div class="col-lg-6">
										<label class="form-label" for="inputEmail">{{ 'Email'|trans }}</label>
										<input class="form-control" id="inputEmail" type="text" name="email" value="{{ staff.email }}" required>
									</div>
									<div class="col-lg-6">
										<label class="form-label d-block">{{ 'Status'|trans }}</label>
										<div class="d-flex flex-wrap gap-3">
											<label class="form-check">
												<input class="form-check-input" id="radioStatusActive" type="radio" name="status" value="active" {% if staff.status == 'active' %} checked {% endif %}>
												<span class="form-check-label">{{ 'Active'|trans }}</span>
											</label>
											<label class="form-check">
												<input class="form-check-input" id="radioStatusInactive" type="radio" name="status" value="inactive" {% if staff.status == 'inactive' %} checked {% endif %}>
												<span class="form-check-label">{{ 'Inactive'|trans }}</span>
											</label>
										</div>
									</div>
									<div class="col-12">
										<label class="form-label" for="textareaSignature">{{ 'Signature'|trans }}</label>
										<textarea class="form-control" id="textareaSignature" name="signature" rows="2">{{ staff.signature }}</textarea>
									</div>
								</div>
								<input type="hidden" name="id" value="{{ staff.id }}">
							{% endblock %}

							{% block form_actions %}
								<button class="btn btn-primary" type="submit">{{ 'Update details'|trans }}</button>
							{% endblock %}
						{% endembed %}
					</form>
				</div>
			</div>

			<div class="tab-pane fade" id="tab-permissions" role="tabpanel">
				<div class="p-3">
					{% if staff.role == 'admin' %}
						{% embed 'partial_admin_form_card.html.twig' with {
							title: 'Permissions'|trans,
							subtitle: 'Administrators always have unrestricted access to all modules and actions.'|trans
						} %}
							{% block form_content %}
								<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>
							{% endblock %}
						{% endembed %}
					{% else %}
						{% set prms = admin.staff_permissions_get({ 'id': staff.id }) %}
						<form method="post" action="admin/staff/permissions_update" {{ fb_api_form({message: 'Permissions Updated'|trans}) }}>
							{% embed 'partial_admin_form_card.html.twig' with {
								title: 'Permissions'|trans,
								subtitle: 'Grant module access and fine-grained permissions for this staff account.'|trans
							} %}
								{% block form_header_actions %}
									<button class="btn btn-secondary" type="button" onclick="toggleAll(true);">{{ 'Grant All Permissions'|trans }}</button>
									<button class="btn btn-danger" type="button" onclick="toggleAll(false);">{{ 'Revoke All Permissions'|trans }}</button>
								{% endblock %}

								{% block form_content %}
									<input type="hidden" name="permissions[default][all]" id="permissions-default-all" value="{% if prms.default.all %}1{% endif %}">

									{% for modName, mod in mods|filter(mod => mod.permissions.hide_permissions is not true) %}
										<section class="mb-4 pb-4 border-bottom">
											<div class="row g-3">
												<div class="col-lg-3">
													<h6 class="card-title mb-0">{{ modName|replace({'_': ' '})|title|trim }}</h6>
												</div>
												<div class="col-lg-9">
													{% if not mod.permissions.can_always_access %}
														<div class="form-check mb-3">
															<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 %}

													<div class="row g-3">
													{% for permissionName, permission in mod.permissions %}
														{% if permission.type == 'bool' %}
															<div class="col-lg-6">
																<div class="form-check mt-1">
																	<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>
															</div>
														{% endif %}

														{% if permission.type == 'select' %}
															<div class="col-lg-6">
																<label for="input-{{ modName }}-{{ permissionName }}" class="form-label">{{ 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>
																<select class="form-select permission-select" id="input-{{ modName }}-{{ permissionName }}" name="permissions[{{ modName }}][{{ permissionName }}]">
																	<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>
															</div>
														{% endif %}
													{% endfor %}
													</div>
												</div>
											</div>
										</section>
									{% endfor %}

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

								{% block form_actions %}
									<button class="btn btn-primary" type="submit">{{ 'Save'|trans }}</button>
								{% endblock %}
							{% endembed %}
						</form>
					{% endif %}
				</div>
			</div>

			<div class="tab-pane fade" id="tab-password" role="tabpanel">
				<div class="p-3">
					<form method="post" action="admin/staff/change_password" {{ fb_api_form({message: 'Staff Member Password Changed'|trans}) }}>
						{% embed 'partial_admin_form_card.html.twig' with {
							title: 'Change Staff Member Password'|trans,
							subtitle: 'Set a new password for this staff account and confirm it before saving.'|trans
						} %}
							{% block form_content %}
								<div class="row g-3">
									<div class="col-lg-6">
										<label class="form-label" for="inputPassword">{{ 'Password'|trans }}</label>
										<input class="form-control" id="inputPassword" type="password" name="password" required>
									</div>
									<div class="col-lg-6">
										<label class="form-label" for="inputPasswordConfirm">{{ 'Password confirmation'|trans }}</label>
										<input class="form-control" id="inputPasswordConfirm" type="password" name="password_confirm" required>
									</div>
								</div>
								<input type="hidden" name="id" value="{{ staff.id }}">
							{% endblock %}

							{% block form_actions %}
								<button class="btn btn-primary" type="submit">{{ 'Submit'|trans }}</button>
							{% endblock %}
						{% endembed %}
					</form>
				</div>
			</div>
		{% endblock %}
	{% endembed %}
{% endblock %}

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

        const wildcardInput = document.getElementById('permissions-default-all');
        if (wildcardInput) {
            wildcardInput.value = check ? '1' : '';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const wildcardInput = document.getElementById('permissions-default-all');
        if (!wildcardInput) {
            return;
        }

        document.querySelectorAll('.permission-box, .permission-select').forEach((element) => {
            element.addEventListener('change', function () {
                wildcardInput.value = '';
            });
        });
    });
</script>
{% endblock %}
