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



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

<link href="~/assetsclient/css/task-manager-create.css" 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">
					
					<input type="hidden" asp-for="PositionId" />
					@* <div class="col-12">
						<div class="from-group" id="select2PositionList">
							<select class="form-select select2Position" multiple="multiple" asp-for="Accounts">
								@foreach (var item in Model.Accounts)
								{
									<option value="@item.Id">@item.Fullname</option>
								}
							</select>
						</div>
					</div> *@

						<div class="col-12">
							<div class="d-flex align-items-center justify-content-between mb-3">
								<div class="from-group">
									<input class="form-check-input selectAll" type="checkbox" name="selectAll" id="selectAll">
									<label class="form-check-label" for="selectAll">
										انتخاب همه
									</label>
								</div>

								<div class="from-group">
									<input type="text" class="form-control" placeholder="جستجو" id="search" onkeyup="searchMember()">
								</div>
							</div>
						</div>

						<div class="col-12" style="overflow: auto; height: 230px;" id="PersonnelList">
							@foreach (var item in Model.Accounts)
							{
								<div class="items">
									<div class="from-group">
										<input class="form-check-input foo" type="checkbox" name="Accounts" id="select-@item.Id" value="@item.Id">
										<label class="form-check-label searchItem" for="select-@item.Id">
											@item.Fullname
										</label>
									</div>
								</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 () {

		

		//******************** انتخاب چک باکس ********************
		$('.items').click(function() {
			var isChecked = $(this).find('input[type="checkbox"]').is(":checked");

			if (isChecked) {
				$(this).find('input[type="checkbox"]').prop('checked', false);
				$(this).removeClass('checked-item');
			} else {
				$(this).find('input[type="checkbox"]').prop('checked', true);
				$(this).addClass('checked-item');
			}
		});
		//******************** انتخاب چک باکس ********************

		//******************** انتخاب همه ی چک باکس ها ********************
		$(".selectAll").change(function() {
			$('input:checkbox').not(this).prop('checked', this.checked);
			if ($(this).is(":checked")) {
				$('.items').addClass('checked-item');
			} else {
				$('.items').removeClass('checked-item');
			}
		});
		//******************** انتخاب همه ی چک باکس ها ********************



		$('.select2Position').select2({
			placeholder: {
				text: "انتخاب اعضاء ..."
			}
		});



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


			// if ($('.select2Position').select2('data').length > 0) {
			if (($('input:checkbox').is(":checked"))) {

				
				$('.foo').each(function() {
					if ($(this).is(":checked")) {
						var a = $(this).val();
						var b = a + "+";
						idlist += b;
					}
				});

				$('#Accounts').val(idlist);


				$.ajax({
					async: false,
					dataType: 'json',
					type: 'POST',
					url: '@Url.Page("./Group", "AddAccountToPosition")',
					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);
			}
		});
	});


	function searchMember() {
		var input, filter, tbody, tr, a, i;
		input = document.getElementById("search");

		filter = input.value.toUpperCase();
		tbody = document.getElementById("PersonnelList");
		tr = tbody.getElementsByClassName("items");
		for (i = 0; i < tr.length; i++) {
			td = tr[i].getElementsByClassName("searchItem")[0];
			if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
				tr[i].style.display = "";
			} else {
				tr[i].style.display = "none";
			}
		}
	}

</script>