@using ServiceStationContracts.ViewModels
@{
	ViewData["Title"] = "EditWork";
}

@model (int, List<ClientViewModel>, List<ClientViewModel>)

<script src="~/lib/jquery/dist/jquery.min.js"></script>

<div class="text-center">
	<h2 class="display-4">Редактировать работу №:@Model.Item1</h2>
</div>

<form method="post">
	<div class="row">
		<div class="col-4">Задача:</div>
		<div class="col-8">
			<select id="task" name="task" class="form-control" asp-items="@(new SelectList(ViewBag.Tasks, "Id", "Name"))"></select>
		</div>
	</div>
	<div class="row">
		<div class="col-4">Стоимость:</div>
		<div class="col-8">
			<input id="price" type="text" name="price" readonly />
		</div>
	</div>
</form>

<div class="text-center">
	<h2 class="display-5">Клиенты в работе</h2>
</div>

<div class="text-center">
	@{
		if (Model.Item2 == null) {
			<h3 class="display-4">Авторизируйтесь</h3>
			return;
		}
		<div class="text-end">
			<button class="btn btn-outline-primary" id="btnEdit">Сохранить изменения</button>
		</div>
		<table class="table">
			<thead>
				<tr>
					<th>
						Номер клиента
					</th>
					<th>
						ФИО клиента
					</th>
					<th>
						<input type="checkbox" class="form-check-input old" id="Select_all" name="Select_all" /> Выбрать все
					</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var item in Model.Item2) {
					<tr>
						<th>
							@Html.DisplayFor(modelItem => item.Id)
						</th>
						<th>
							@Html.DisplayFor(modelItem => item.FIO)
						</th>
						<th>
							<input type="checkbox" class="form-check-input old" id="Select_rec" name="Select_rec" value="@item.Id" />
						</th>
					</tr>
				}
			</tbody>
		</table>
	}
</div>

<div class="text-center">
	<h2 class="display-5">Добавить новых клиентов</h2>
</div>

<div class="text-center">
	@{
		if (Model.Item3 == null) {
			<h3 class="display-4">Авторизируйтесь</h3>
			return;
		}
		<table class="table">
			<thead>
				<tr>
					<th>
						Номер клиента
					</th>
					<th>
						ФИО клиента
					</th>
					<th>
						<input type="checkbox" class="form-check-input new" id="Select_all_new" name="Select_all_new" /> Выбрать все
					</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var item in Model.Item3) {
					<tr>
						<th>
							@Html.DisplayFor(modelItem => item.Id)
						</th>
						<th>
							@Html.DisplayFor(modelItem => item.FIO)
						</th>
						<th>
							<input type="checkbox" class="form-check-input new" id="Select_rec_new" name="Select_rec_new" value="@item.Id" />
						</th>
					</tr>
				}
			</tbody>
		</table>
	}
</div>

<script>
	$('#task').on('change', function () {
		check();
	});
	$('.form-check-input').on('change', function () {
		check();
	});

	document.getElementById('Select_all').checked = true;
	checked_all();

	check();

	function check() {
		var task = $('#task').val();
		let checkboxes = document.getElementsByTagName('input');
		var count = 0;

		$("input[name='Select_rec']:checked").each(function () {
			count++;
		});
		$("input[name='Select_rec_new']:checked").each(function () {
			count++;
		});
		if (task && count >= 0) {
			$.ajax({
				method: 'POST',
				url: '/Home/Calc',
				data: { task: task, count: count },
				success: function (result) {
					$('#price').val(result)
				},
				error: function () {

				}
			})
		};
	}

	function checked_all() {
		let checkboxes = document.querySelectorAll('.form-check-input.old');
		let val = null;

		for (var i = 0; i < checkboxes.length; i++) {
			if (val == null) {
				val = checkboxes[i].checked;
			}
			else {
				checkboxes[i].checked = val;
			}
		}
	}

	$('#Select_all').on('click', function () {
		checked_all();
		check();

	});

	$('#Select_all_new').on('click', function () {
		let checkboxes = document.querySelectorAll('.form-check-input.new');
		let val = null;

		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].type === 'checkbox') {
				if (val == null) {
					val = checkboxes[i].checked;
				}
				else {
					checkboxes[i].checked = val;
				}
			}
		}
		check();
	});

	$('#btnEdit').on('click', function () {
		let val = [];
		var task = $('#task').val();
		var id = $('#id').val();

		$("input[name='Select_rec']:checked").each(function () {
			val.push($(this).val());
		});
		$("input[name='Select_rec_new']:checked").each(function () {
			val.push($(this).val());
		});

		$.ajax({
			type: 'POST',
			url: '/Home/EditWork',
			data: { 'ids': val, 'task': task, 'id':@Model.Item1 },
			success: function () {
				window.location.href = "Index";
			},
			error: function () {
				window.location.href = "Index";
			}
		})
	});
</script>