@{
	ViewData["Title"] = "UpdatePet";
}

<div class="text-center">
	<h2 class="display-4">Редактирование животного</h2>
</div>
<form method="post">
	<div class="row">
		<div class="col-4">Животное:</div>
		<div class="col-8">
			<select id="pet" name="pet" class="form-control" asp-items="@(new SelectList(@ViewBag.Pets, "Id", "PetName"))"></select>
		</div>
	</div>
	<div class="row">
		<div class="col-4">Кличка:</div>
		<div class="col-8"><input type="text" name="name" id="name" class="form-control" /></div>
	</div>
	<div class="row">
		<div class="col-4">Вид:</div>
		<div class="col-8"><input type="text" id="type" name="type" class="form-control" /></div>
	</div>
	<div class="row">
		<div class="col-4">Порода:</div>
		<div class="col-8"><input type="text" id="breed" name="breed" class="form-control" /></div>
	</div>
	<div class="row">
		<div class="col-4">Пол:</div>
		<div class="col-8"><input type="text" id="gender" name="gender" class="form-control" /></div>
	</div>

	<div class="row">
		<div class="col-8"></div>
		<div class="col-4"><input type="submit" value="Сохранить" class="btn btn-primary" /></div>
	</div>

</form>

@section Scripts
	{
	<script>
		function check() {
			var pet = $('#pet').val();
			if (pet) {
				$.ajax({
					method: "GET",
					url: "/Home/GetPet",
					data: { petId: pet },
					success: function (result) {
						$('#name').val(result.item1.petName);
						$('#type').val(result.item1.petType);
						$('#breed').val(result.item1.petBreed);
						$('#gender').val(result.item1.petGender);
					}
				});
			};
		}
		check();
		$('#pet').on('change', function () {
			check();
		});
	</script>
}