<!--
 ~ 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="add-new-role-modal">
	<div class="modal-dialog modal-lg">
		<form id="addNewRoleForm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">[[#{add_new_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="roleName" class="col-sm-3 col-form-label">[[#{name}]] (<span class="text-danger">*</span>)</label>
						<div class="col-sm-5">
							<input type="text" name="roleName" id="roleName"
								   class="form-control" th:placeholder="#{name}"
								   onkeydown="ezyadmin.onKeyDownToAddNewRole();">
						</div>
						<label id="roleNameErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="roleName">
							<i class="far fa-times-circle"></i> <span id="roleNameError">[[#{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="roleDisplayName" class="col-sm-3 col-form-label">
							[[#{display_name}]] (<span class="text-danger">*</span>)
						</label>
						<div class="col-sm-5">
							<input type="text" name="roleDisplayName" id="roleDisplayName"
								   class="form-control" th:placeholder="#{display_name}"
								   onkeydown="ezyadmin.onKeyDownToAddNewRole();">
						</div>
						<label id="roleDisplayNameErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="roleDisplayName">
							<i class="far fa-times-circle"></i> <span id="roleDisplayNameError">[[#{invalid}]]</span>
						</label>
					</div>
					<div class="row">
						<label for="rolePriority" class="col-sm-3 col-form-label">
							[[#{priority}]]
						</label>
						<div class="col-sm-5">
							<input type="text" name="rolePriority" id="rolePriority"
								   class="form-control" th:placeholder="#{priority}"
								   onkeydown="ezyadmin.onKeyDownToAddNewRole();"
							       th:value="${minRolePriority}">
						</div>
						<label id="rolePriorityErrorLabel" class="col-sm-4 col-form-label text-danger d-none" for="rolePriority">
							<i class="far fa-times-circle"></i> <span id="rolePriorityError">[[#{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.onAddNewRoleClick();">[[#{add}]]</button>
				</div>
			</div>
		</form>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script th:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.roleCount = /*[[${roles != null ? roles.size() : 0}]]*/;
ezyadmin.messages.add_new_role_successfully = /*[[#{add_new_role_successfully}]]*/;
ezyadmin.messages.must_be_gte_pvalue = /*[[#{must_be_gte_pvalue}]]*/;
/*]]>*/

// =========== add new role script ========
ezyadmin.showAddNewRoleModal = function() {
	$('#roleNameErrorLabel').addClass('d-none');
	$('#roleDisplayNameErrorLabel').addClass('d-none');
	$('#add-new-role-modal').modal('show');
}

ezyadmin.hideAddNewRoleModal = function() {
	$('#add-new-role-modal').modal('hide');
}

ezyadmin.onKeyDownToAddNewRole = function() {
    if(event.key === 'Enter') {
    	ezyadmin.onAddNewRoleClick();
    }
}

ezyadmin.onAddNewRoleClick = function() {
    var formData = ezyadmin.formDataToObject('addNewRoleForm');
    var api = ezyadmin.addNewRoleApi;
    $.ajax({
        type: 'POST',
        url: api.url,
        data: formData,
        success: function (data) {
        	$('#add-new-role-modal').modal('hide');
            if (api.onSuccess) {
            	api.onSuccess(data);
            }
            var roleIdsElement = $('#roleIds');
            if (roleIdsElement.length) {
            	roleIdsElement.append(
            		'<option value="' + data.id + '">' +
            			(++ ezyadmin.roleCount) + '. ' + data.displayName +
					'</option>'
            	);
            }
            if (api.showToast != false) {
            	ezyadmin.shortToast(
            		'bg-success',
            		ezyadmin.messages.add_new_role_successfully
            	);
            }
        },
        error: function (e) {
        	var errors = e.responseJSON || {};
			errors.rolePriority = errors.rolePriority;
			if (errors.rolePriority == 'denied') {
				ezyadmin.errorMessageByCode.denied = ezyadmin
					.messages.must_be_gte_pvalue
					.replace('{0}', errors.minAdminRolePriority);
			}
            ezyadmin.processUpdateApiErrors(formData, e);
        }
	});
}
</script>
</body>
</html>
