﻿@{
	ViewData["Title"] = "CreatePurchase";
}

<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="drug" name="drug" class="form-control" asp-items="@(new SelectList(@ViewBag.Drugs,"Id", "DrugName"))"></select>
		</div>
	</div>
	<div class="row">
		<div class="col-4">Животные:</div>
		<div class="col-8">
			<select name="pets" class="form-control" multiple size="6" id="pets">
				@foreach (var pet in ViewBag.Pets)
				{
					<option value="@pet.Id">@pet.PetName</option>
				}
			</select>
		</div>
	</div>
	<div class="row">
		<div class="col-4">Количество:</div>
		<div class="col-8">
			<input type="text" name="count" id="count" />
		</div>
	</div>
	<div class="row">
		<div class="col-4">Сумма:</div>
		<div class="col-8">
			<input type="text" id="sum" name="sum" readonly />
		</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>
			$('#drug').on('change', function () {
				check();
			});
			$('#count').on('change', function () {
				check();
			});

			function check() {
				var count = $('#count').val();
				var drug = $('#drug').val();
				if (count && drug) {
					$.ajax({
						method: "POST",
						url: "/Home/Calc",
						data: { count: count, drug: drug },
						success: function (result) {
							$("#sum").val(result);
						}
					});
				};
			}
		</script>
}