Backend-Api/ServiceHost/Areas/AdminNew/Pages/Company/Task/GroupCreateModal.cshtml

@model AccountManagement.Application.Contracts.Position.CreatePositionModalViewModel
@using Version = _0_Framework.Application.Version



<script src="~/AssetsClient/js/jquery-ui.js"></script>

<link href="~/assetsadminnew/tasks/css/task-manager-create.css?ver=@Version.AdminVersion" rel="stylesheet" />
<link href="~/AssetsClient/css/select2.css?ver=@Version.StyleVersion" rel="stylesheet" />

<style>

	.modal-content {
		/* width: 900px; */
	}

	.errored {
		animation: shake 300ms;
		color: #eb3434 !important;
		background-color: #fef2f2 !important;
		border: 1px solid #eb3434 !important;
		border-radius: 7px;
	}

	/* Start Select2 */
	.select2.select2-container .select2-selection {
		display: flex !important;
		height: 0 !important;
		padding: 0px;
	}

	.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
		margin: 0;
	}

	.select2-container--default .select2-search--inline .select2-search__field {
		line-height: 32px;
		padding: 0 0;
		font-family: 'IRANYekanX';
	}
	/* End Select2 */

	.validTime {
		color: #4d7c0f !important;
	}

	.invalidTime {
		color: #b91c1c !important;
	}

</style>

<form role="form" method="post" name="create-form" id="create-form" autocomplete="off">
	<div class="modal-content" style="height: 450px;">
		<div class="modal-header d-block text-center">
			<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
			<h5 class="modal-title" id="createNewGroupLabel">ساخت گروه جدید</h5>
		</div>

		<div class="modal-body">
			<div class="container-fluid">
				<div class="row g-2">

					<div class="col-12">
						<div class="from-group">
							<input type="text" class="form-control" name="command.Name" placeholder="عنوان" id="groupName">
						</div>
					</div>

					<div class="col-12">
						<div class="from-group" id="select2PositionList">
							<select class="form-select" name="command.Value" id="UnUsedPositionValue">
								@foreach (var item in Model.UnUsedPositionValue)
								{
									<option value="@item">سطح @item</option>
								}
							</select>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="modal-footer justify-content-center align-items-center">
			<div class="row">
				<div class="col-6 text-end">
					<button type="button" class="btn-cancel2" data-bs-dismiss="modal">انصراف</button>
				</div>
				<div class="col-6 text-start">
					<button class="btn-register" id="btn-add">افزودن</button>
				</div>
			</div>
		</div>
	</div>
</form>


<script src="~/AdminTheme/assets/sweet-alert/sweet-alert.min.js"></script>

<script>

	$(document).ready(function () {



		$('.select2Position').select2({
			placeholder: {
				text: "انتخاب سطح ..."
			}
		});

		$('#btn-add').on('click',
			function (e) {
				e.preventDefault();

				var groupName = $("#groupName").val().trim();

				if (groupName != '') {
					$.ajax({
						async: false,
						dataType: 'json',
						type: 'POST',
						url: '@Url.Page("./Group", "CreatePosition")',
						headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
						data: $('#create-form').serialize(),
						success: function (response) {
							if (response.isSuccedded) {
								$("#groupName").val('');
								$('.alert-success-msg').show();
								$('.alert-success-msg p').text(response.message);
								setTimeout(function () {
									$('.alert-success-msg').hide();
									$('.alert-success-msg p').text('');
									window.location.replace('/AdminNew/Company/Task/Group');
								}, 1500);
							} else {
								$('.alert-msg').show();
								$('.alert-msg p').text(response.message);
								setTimeout(function () {
									$('.alert-msg').hide();
									$('.alert-msg p').text('');
								}, 3500);
							}
						},
						error: function (err) {
							console.log(err);
						}
					});
				} else {
					$('.alert-msg').show();
					$('.alert-msg p').text('لطفا عنوان را وارد نمائید.');
					$("#groupName").addClass('errored');
					setTimeout(function () {
						$('.alert-msg').hide();
						$('.alert-msg p').text('');
						$("#groupName").removeClass('errored');
					}, 3500);
				}
			});


		$('#groupName').on('keyup keypress', function (e) {
			if ($('#groupName').val() != '') {
				//کلید دمکه اینتر 13
				var keyCode = e.keyCode || e.which;
				if (keyCode === 13) {
					$('#btn-add').click();
				}
			}
		});

	});


</script>