@using ElectronicsShopContracts.ViewModels
@using ElectronicsShopDataModels.Models

@model (int, Dictionary<int, (IProductModel, int)>)

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

<div class="text-center">
	<h1 class="display-4">Оплата корзины</h1>
</div>

<form method="post">
	<div class="row">
		<div class="col-4"></div>
		<div class="col-8">
			<input id="id" type="hidden" name="id" readonly value="@Model.Item1" />
			<div class="row">
				<div class="col-4">Сумма платежа:</div>
				<div class="col-8">
					<input type="text" name="paysum" id="paysum" />
					<input type="submit" value="Оплатить!" class="btn btn-primary" />
				</div>
			</div>
			
		</div>
	</div>
	<div class=" text-center">
		<table class="table">
			<thead>
				<tr>
					<th>
						Номер
					</th>
					<th>
						Продукт
					</th>
					<th>
						Количество
					</th>
					<th>
						Сумма
					</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var item in Model.Item2)
				{
					<tr class="element">
						<th>
							@Html.DisplayFor(modelItem => item.Key)
						</th>
						<th>
							@Html.DisplayFor(modelItem => item.Value.Item1.ProductName)
						</th>

						<th class="count">
							@Html.DisplayFor(modelItem => item.Value.Item2)
						</th>

						<th class="countsum">
							@Html.DisplayFor(modelItem => item.Value.Item1.Price)
						</th>
					</tr>
				}
			</tbody>
		</table>
		
		<div class="row">
			<div class="col-4"></div>
			<div class="col-8">
				<input type="submit" value="Заказ готов, вернуться!" class="btn btn-primary" />
			</div>
		</div>
	</div>

</form>

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