{% extends "../../layouts/master.njk" %}

{% block csslib %}
	<link href='/cms-static/admin/assets/plugins/custom/jstree/jstree.bundle.css' rel='stylesheet' type='text/css'/>
{% endblock %}

{% block jslib %}
	<!-- begin::Vendors Javascript(used by this page) -->
	<script src="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js"></script>
	<!-- end::Vendors Javascript -->
	<!-- begin::Custom Javascript(used by this page) -->
	<script src="/cms-static/common/js/tree.min.js"></script>
	<!-- end::Custom Javascript -->
	<script src="/cms-static/common/js/form-data-json.min.js"></script>
	<script src="/cms-static/common/js/es-form.js"></script>
{% endblock %}

{% block customScript %}
	<script>
		// prettier-ignore
		{# console.log(document.getElementById('admin_details_field').value)
		console.log(document.getElementById('config_privilege_routes').value)
		console.log(JSON.parse(document.getElementById('config_privilege_routes').value)) #}
		const admin = JSON.parse(document.getElementById('admin_details_field').value)
		const landing_url_privilege_id = document.getElementById('landing_url_privilege_id').value
		const config_privilege_routes = JSON.parse(document.getElementById('config_privilege_routes').value)
		const current_privileges = JSON.parse(document.getElementById('current_privileges').value)
		{# console.log("AD",admin) #}
		//- console.log("config_privilege_routes",config_privilege_routes)
		//- console.log("current_privileges",current_privileges)
		{# let data = `${JSON.stringify(config_privilege_routes)}` #}
		let data = config_privilege_routes
		console.log(data)
		let tree = new Tree('.user-privileges-tree-container', {
			data: [
				{
					id: '-1',
					text: 'ROOT',
					children: data
				}
			],
			closeDepth: 3,
			loaded: function () {
				let adminRole = admin?.role || ''
				if ((!adminRole || typeof adminRole != 'undefined') && (adminRole == 'super_admin' || adminRole == 'admin')) {
					let ids = []
					data.map(item => {
						ids.push(item.id)
					})
					this.values = ids
					this.disables = ids
				} else {
					this.values = ['dashboard.page',landing_url_privilege_id]
					this.disables = ['dashboard.page',landing_url_privilege_id]
					this.values = current_privileges
				}

			},
			onChange: function () {
				//- console.log(this.values);
				document.getElementById('user_privilege_field').value = this.values
			}
		})
	</script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>{{ 'Edit' if admin else 'Add' }} User - {{browserTitle | upper()}} CMS</title>
	{% endblock %}

	<div class="d-flex flex-column flex-column-fluid">
		<div id="beaver_app_toolbar" class="app-toolbar py-3 py-lg-6">
			<div id="beaver_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
					<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
						{{ 'Edit' if admin else 'Add' }} User
				</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a href="{{LANDING_URL}}" class="text-muted text-hover-primary">Dashboard</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">Admin 
					<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">{{ 'Edit' if admin else 'New' }}</li>
					</ul>
				</div>
			</div>
		</div>

		<div id="beaver_app_content" class="app-content flex-column-fluid">
			<div id="beaver_app_content_container" class="app-container container-xxl">
				<div class="card mb-5 mb-xl-10">
					<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
						<div class="card-title m-0">
							<h3 class="fw-bold m-0">Admin Form</h3>
						</div>
					</div>
					<div id="beaver_account_settings_profile_details">
						<form id="beaver_account_profile_details_form" class="form es-form" action="/admin/access-control/users/save" data-redirect-url="/admin/access-control/users" method="post" autocomplete="off">
							<input type="hidden" name="id" value="{{ admin._id }}">
							<input id="admin_details_field" type="hidden" value="{{jsonToString(admin)}}">
							<input id="landing_url_privilege_id" type="hidden" value="{{landing_url_privilege_id}}">
							<input id="config_privilege_routes" type="hidden" value="{{jsonToString(config_privilege_routes)}}">
							<input id="current_privileges" type="hidden" value="{{jsonToString(current_privileges)}}">
							<div class="card-body border-top p-9">
								<div class="row">
									<div class="col-md-9">
										<div class="row mb-6">
											<label class="col-lg-4 col-form-label required fw-semibold fs-6">Name</label>
											<div class="col-lg-8">
												<div class="row">
													<div class="col-lg-12 fv-row">
														<input type="text" name="name" placeholder="Name" value="{{ admin.name }}" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
														<div class="fv-plugins-message-container invalid-feedback" id="field-error-name"></div>
													</div>
												</div>
											</div>
										</div>
										<div class="row mb-6">
											<label class="col-lg-4 col-form-label required fw-semibold fs-6">Role</label>
											<div class="col-lg-8 fv-row">
												<select name="role" data-placeholder="Select a role" class="form-select mb-2">
													{%if not admin%}
														<option value="admin" {{ 'selected' if admin.role == 'admin'}}>Admin</option>
													{%endif%}
													<option value="editor" {{ 'selected' if admin.role == 'editor' }}>Editor</option>
													<option value="finance" {{ 'selected' if admin.role == 'finance'}}>Finance</option>
												</select>
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-role"></div>
											</div>
										</div>
										<div class="row mb-6">
											<label class="col-lg-4 col-form-label required fw-semibold fs-6">Status</label>
											<div class="col-lg-8 fv-row">
												<select name="status" data-placeholder="Select Status" class="form-select mb-2">
													<option value="true" {{ 'selected' if admin.active }}>Active</option>
													<option value="false" {{ 'selected' if admin.active == false }}>In Active</option>
												</select>
											</div>
										</div>
										<div class="row mb-6">
											<label class="col-lg-4 col-form-label required fw-semibold fs-6">Email</label>
											<div class="col-lg-8 fv-row">
												<input type="text" name="email" placeholder="Email" value="{{ admin.email }}" class="form-control form-control-lg form-control-solid">
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-email"></div>
											</div>
										</div>
										<div class="row mb-6">
											<label class="col-lg-4 col-form-label fw-semibold fs-6">
												<span class="required">Password</span>
												<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Current password should be enter to update profile details"></i>
											</label>
											<div class="col-lg-8 fv-row">
												<input type="password" name="password" placeholder="Password" value="" autocomplete="off" class="form-control form-control-lg form-control-solid">
												<div class="fv-plugins-message-container invalid-feedback" id="field-error-password"></div>
											</div>
										</div>
										<input id="user_privilege_field" type="hidden" name="privileges" value="{{admin.privileges or ''}}">
									</div>
									<div class="col-md-3">
										<div class="user-privileges-tree-container"></div>
									</div>
								</div>
							</div>
							<div class="card-footer d-flex justify-content-end py-6 px-9">
								<button id="beaver_account_profile_details_submit" class="btn btn-primary form-submit-btn" type="submit">
									<span class="preloader d-none">Updating</span>
									<span class="label">Save</span>
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}