<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="content" class="modal fade pt-5rem" id="edit-role-modal">
	<div class="modal-dialog modal-lg">
		<form id="editRoleForm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">[[#{edit_role}]]</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="form-group row">
						<label for="editRoleName" class="col-sm-3 col-form-label">[[#{name}]] (<span class="text-danger">*</span>)</label>
						<div class="col-sm-5">
							<input type="text" name="editRoleName" id="editRoleName"
								   class="form-control" th:placeholder="#{name}"
								   th:value="${role != null ? role.name : ''}"
								   onkeydown="ezyadmin.onKeyDownToEditRole();">
						</div>
						<label id="editRoleNameErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="editRoleName">
							<i class="far fa-times-circle"></i> <span id="editRoleNameError">[[#{invalid}]]</span>
						</label>
						<div class="col-12">
							<div class="row">
								<div class="col-md-3"></div>
								<div class="col-md-9">
									<span>[[#{name_input_guide}]]</span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label for="editRoleDisplayName" class="col-sm-3 col-form-label">[[#{display_name}]] (<span class="text-danger">*</span>)</label>
						<div class="col-sm-5">
							<input type="text" name="editRoleDisplayName" id="editRoleDisplayName"
								   class="form-control" th:placeholder="#{display_name}"
								   th:value="${role != null ? role.displayName : ''}"
								   onkeydown="ezyadmin.onKeyDownToEditRole();">
						</div>
						<label id="editRoleDisplayNameErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="editRoleDisplayName">
							<i class="far fa-times-circle"></i> <span id="editRoleDisplayNameError">[[#{invalid}]]</span>
						</label>
					</div>
					<div class="row">
						<label for="editRolePriority" class="col-sm-3 col-form-label">[[#{priority}]]</label>
						<div class="col-sm-5">
							<input type="text" name="editRolePriority" id="editRolePriority"
								   class="form-control" th:placeholder="#{priority}"
								   th:value="${role != null ? role.priority : ''}"
								   onkeydown="ezyadmin.onKeyDownToEditRole();">
						</div>
						<label id="editRolePriorityErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="editRolePriority">
							<i class="far fa-times-circle"></i> <span id="editRolePriorityError">[[#{invalid}]]</span>
						</label>
						<div class="col-12">
							<div class="row">
								<div class="col-md-3"></div>
								<div class="col-md-9">
									<span>[[#{role_priority_input_guide}]]</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">[[#{cancel}]]</button>
					<button type="button" class="btn btn-primary" onclick="ezyadmin.onEditRoleClick();">[[#{edit}]]</button>
				</div>
			</div>
		</form>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script th:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.edit_role_successfully = /*[[#{edit_role_successfully}]]*/;
ezyadmin.messages.must_be_gte_pvalue = /*[[#{must_be_gte_pvalue}]]*/;
/*]]>*/

// =========== add new role script ========
ezyadmin.showEditRoleModal = function() {
	$('#editRoleNameErrorLabel').addClass('d-none');
	$('#editRoleDisplayNameErrorLabel').addClass('d-none');
	$('#edit-role-modal').modal('show');
}

ezyadmin.hideEditRoleModal = function() {
	$('#edit-role-modal').modal('hide');
}

ezyadmin.onKeyDownToEditRole = function() {
    if(event.key === 'Enter') {
    	ezyadmin.onEditRoleClick();
    }
}

ezyadmin.onEditRoleClick = function() {
    var formData = ezyadmin.formDataToObject('editRoleForm');
    ezyadmin.updatedRoleName = formData.editRoleName;
    var requestFormData = {
    	roleName: formData.editRoleName,
    	roleDisplayName: formData.editRoleDisplayName,
    	rolePriority: formData.editRolePriority
    };
    var api = ezyadmin.editRoleApi;
    $.ajax({
        type: 'PUT',
        url: api.url,
        data: requestFormData,
        success: function (data) {
        	$('#edit-role-modal').modal('hide');
            if (api.onSuccess) {
            	api.onSuccess(data);
            }
            if (api.showToast != false) {
            	ezyadmin.shortToast(
            		'bg-success',
            		ezyadmin.messages.edit_role_successfully
				);
            }
        },
        error: function (e) {
            var errors = e.responseJSON || {};
			errors.rolePriority = errors.editRolePriority;
			if (errors.editRolePriority == 'denied') {
				ezyadmin.errorMessageByCode.denied = ezyadmin
					.messages.must_be_gte_pvalue
					.replace('{0}', errors.minAdminRolePriority);
			}
            ezyadmin.processUpdateApiErrors(formData, e);
        }
	});
}
</script>
</body>
</html>
