@using HardwareShopContracts.ViewModels
@{
	ViewData["Title"] = "CreatePurchase";
	Layout = "~/Views/Shared/_LayoutWorker.cshtml";
}

<div class="text-center">
	<h2 class="display-4">Создание покупки</h2>
</div>

<div class="d-flex flex-column align-items-center">
	<div class="col-sm-3">
		<label class="form-label">Цена</label>
		<input type="number" step="0.01" class="form-control" name="sum" id="sum" readonly min="0.01" value="0" required>
	</div>
	<h1 class="display-6">Товары</h1>
	<div class="d-flex justify-content-center">
		<button type="button" class="btn btn-primary mx-2 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Добавить</button>
		<button type="button" class="btn btn-primary mx-2 mt-3">Удалить</button>
	</div>
	<table class="table table-hover">
		<thead>
			<tr>
				<th scope="col">Товар</th>
				<th scope="col">Количество</th>
				<th scope="col">Цена</th>
			</tr>
		</thead>
		<tbody id="result">
		</tbody>
	</table>
	<div class="col-sm-2 d-flex justify-content-evenly align-items-baseline">
		<button type="button" class="btn btn-primary mt-3 px-4" id="createpurchase">Сохранить</button>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Товар</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
			</div>
			<div class="modal-body">
				<label class="form-label">Товар</label>
				<select id="good" name="good" class="form-control" asp-items="@(new SelectList(@ViewBag.Goods, "Id", "GoodName"))"></select>
				<label class="form-label">Количество</label>
				<input type="number" class="form-control" name="count" id="count" min="1" value="1" required>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="savegood">Сохранить</button>
			</div>
		</div>
	</div>
</div>

@section Scripts
	{
	<script>
		let list = [];
		const submitGoodBtn = document.getElementById("savegood");
		//const editBtn = document.getElementById("editcomponent");
		const saveBtn = document.getElementById("createpurchase");
		const countElem = document.getElementById("count");
		const resultTable = document.getElementById("result");
		const totalSum = document.getElementById("sum");

		submitGoodBtn.addEventListener("click", () => {
			console.log('try to add good')
			var count = $('#count').val();
			var good = $('#good').val();
			$.ajax({
				method: "GET",
				url: `/Home/GetGood`,
				data: { Id: good },
				success: function (result) {
					let flag = false
					if (list.length > 0) {
						list.forEach((elem) => {
							if (elem.good.id === parseInt(result.id)) {
								console.log('good already added')
								flag = true
							}
						})
					}
					if (!flag) list.push({ good: result, count: count })
					reloadTable()
					countElem.value = '1'
				}
			});
		})

		saveBtn.addEventListener("click", () => {
			console.log('try to add purchase')
			let goods = []
			let counts = []
			list.forEach((x) => {
				goods.push(x.good);
				counts.push(parseInt(x.count))
			})
			$.ajax(
				{
					url: `/Home/CreatePurchase`,
					type: 'POST',
					contentType: 'application/json',
					data: JSON.stringify({
						"Sum": parseFloat(totalSum.value),
						"ListPurchaseGoods": goods, "PurchaseGoodsCounts": counts
					})
				}
			).done(() => window.location.href = '/Home/Purchases')
		})

		function reloadTable() {
			resultTable.innerHTML = ''
			let price = 0;
			list.forEach((elem) => {
				console.log(elem);
				resultTable.innerHTML += `<tr><td>${elem.good.goodName}</td><td>${elem.count}</td><td>${Math.round(elem.good.price * elem.count * 100) / 100}</td></tr>`
				price += elem.good.price * elem.count
			})
			totalSum.value = Math.round(price * 100) / 100
		}

	</script>
}


@*<form class="d-flex justify-content-evenly">
	<div class=" col-sm-8">
		<div class="text-center">
			<h2 class="display-4">Товары</h2>
		</div>
		<div class="text-center" name="id">
			<table class="table">
				<thead>
					<tr>
						<th>
							Номер
						</th>
						<th>
							Название товара
						</th>
						<th>
							Цена
						</th>
						<th>
							Количество
						</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<div class="text-center d-flex flex-column mt-5">
			<button type="button" class="btn btn-primary btn-lg mb-5" data-bs-toggle="modal" data-bs-target="#exampleModal">Добавить</button>
			<button type="button" class="btn btn-primary btn-lg mb-5" data-bs-toggle="modal" data-bs-target="#exampleModal">Изменить</button>
			<button type="button" class="btn btn-primary btn-lg mb-5">Удалить</button>
			<button type="button" class="btn btn-primary btn-lg mb-5">Обновить</button>
			<button type="button" class="btn btn-primary btn-lg mb-5">Сохранить</button>
	</div>
	<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Товар</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
				</div>
				<div class="modal-body">
					<div>
						<label class="form-label">Товар</label>
						<select class="form-select">
							<option value="1">Товар 1</option>
							<option value="2">Товар 2</option>
						</select>
					</div>
					<div>
						<label class="form-label">Количество</label>
						<input type="number" class="form-control">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
					<button type="button" class="btn btn-primary">Сохранить</button>
				</div>
			</div>
		</div>
	</div>
</form>
*@