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

<div class="text-center">
	<h2 class="display-4">Edit store</h2>
</div>
<form method="post">
	<div class="row">
		<div class="col-4">Store:</div>
		<div class="col-8">
			<select id="store" name="store" class="form-control" asp-items="@(new SelectList(ViewBag.Stores, "Id", "StoreName"))"></select>
		</div>
	</div>
	<div class="row">
		<div class="col-4">Name:</div>
		<div class="col-8"><input type="text" name="name" id="name" class="form-control"/></div>
	</div>
	<div class="row">
		<div class="col-4">Address:</div>
		<div class="col-8"><input type="text" id="address" name="address" class="form-control"/></div>
	</div>
	<div class="row">
		<div class="col-4">Date opening:</div>
		<div class="col-8"><input type="datetime-local" id="date" name="date" class="form-control" required/></div>
	</div>
	<div class="row">
		<div class="col-4">Max sushi:</div>
		<div class="col-8"><input type="number" id="count" name="count" class="form-control"/></div>
	</div>

	<table class="table">
		<thead>
			<tr>
				<th>
					Sushi
				</th>
				<th>
					Count
				</th>
			</tr>
		</thead>
		<tbody id="table-elements">

		</tbody>
	</table>
	<div class="row">
		<div class="col-8"></div>
		<div class="col-4"><input type="submit" value="Save" class="btn btn-primary" /></div>
	</div>
</form>


@section Scripts
	{
		<script>
			function check() {
					const store = $('#store').val();
					if (store) {
					$.ajax({
						method: "GET",
						url: "/Home/GetStore",
						data: { storeId: store },
						success: function (result) {
							$('#name').val(result.item1.storeName);
							$('#address').val(result.item1.storeAdress);
							$('#date').val(result.item1.openingDate);
							$('#count').val(result.item1.packageMaxCount);
							$('#table-elements').html(result.item2);
						}
					});
				}
			}
			check();
				$('#store').on('change', function () {
					check();
			});
		</script>
}