@{
	ViewData["Title"] = "PurchaseUpdate";
}
<div class="text-center">
	<h2 class="display-4 mb-5">Обновить покупку</h2>
</div>
<form method="post">
	<div class="row  mb-3">
		<div class="col-4">Покупка:</div>
		<div class="col-8">
			<select id="purchase" name="purchase" class="form-control" asp-items="@(new SelectList(@ViewBag.Purchases,"Id", "Date"))"></select>
		</div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Адрес:</div>
		<div class="col-8"><input type="text" id="address" name="address" /></div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Сумма:</div>
		<div class="col-8"><input type="number" id="summ" name="summ" /></div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Товары в покупке:</div>
		<div class="col-8">
			<table class="tableProducts">
				<thead>
					<tr>
						<th>Название</th>
						<th>Количество</th>
					</tr>
				</thead>
				<tbody id="purchaseTableProducts">
				</tbody>
			</table>
		</div>
	</div>
	<div class="row  mb-3">
		<div class="col-4">Сборки в покупке:</div>
		<div class="col-8">
			<table class="tableBuilds">
				<thead>
					<tr>
						<th>Название</th>
						<th>Количество</th>
					</tr>
				</thead>
				<tbody id="purchaseTableBuilds">
				</tbody>
			</table>
		</div>
	</div>
	<div class="text-center ">
		<input type="submit" value="Обновить" class="btn btn-success ps-5 pe-5" />
	</div>
</form>
<<script>
	 $('#purchase').on('change', function () {
		 getData();
	 });

	 function getData() {
		 var purchaseId = $('#purchase').val();
		 var purchaseData = @Html.Raw(Json.Serialize(ViewBag.Purchases));
		 var selectedPurchase = purchaseData.find(function (purchase) {
			 return purchase.id == purchaseId;
		 });

		 if (selectedPurchase) {
			 $("#address").val(selectedPurchase.address);
			 $("#summ").val(selectedPurchase.maxCountCars);
			 fillTableProducts(selectedPurchase.productsAndCounts);
			 fillTableBuilds(selectedPurchase.assembliesAndCounts);
		 }
	 }

	 function fillTableProducts(purchaseProducts) {
		 $("#purchaseTableProducts").empty();

		 for (var product in purchaseProducts)
			 $("#purchaseTableProducts").append('<tr><td>' + purchaseProducts[product].item1 + '</td><td>' + purchaseProducts[product].item2 + '</td></tr>');
	 }
	 function fillTableBuilds(purchaseBuilds) {
		 $("#purchaseTableBuilds").empty();

		 for (var build in purchaseBuilds)
			 $("#purchaseTableBuilds").append('<tr><td>' + purchaseBuilds[build].item1 + '</td><td>' + purchaseBuilds[build].item2 + '</td></tr>');
	 }

</script>