@using HardwareShopContracts.ViewModels
@model List<PurchaseViewModel>
@{
    ViewData["Title"] = "Purchases";
	Layout = "~/Views/Shared/_LayoutWorker.cshtml";
}

<div method="post"  class="d-flex justify-content-evenly">
			@{
		if (Model == null)
		{
			<h3 class="display-4">Введите пароль</h3>
			return;
		}
	<div class="col-sm-8">
		<div class="text-center">
			<h2 class="display-4">Покупки</h2>
			<p>
					<a asp-controller="Home" asp-action="CreatePurchase" class="btn btn-primary mx-2">Добавить</a>
				<button type="button" class="btn btn-primary mx-2" id="delete">Удалить заказ</button>
				<button type="button" class="btn btn-primary mx-2" id="inwork">Выполняется</button>
				<button type="button" class="btn btn-primary mx-2" id="ready">Готов</button>
				<button type="button" class="btn btn-primary mx-2" id="done">Выдан</button>
			</p>
		</div>
		<div class="text-center" name="id">
			<table class="table">
				<thead>
					<tr>
						<th>
							Номер
						</th>
						<th>
							Дата оплаты
						</th>
						<th>
							Сумма
						</th>
						<th>
							Статус
						</th>
					</tr>
				</thead>
				<tbody>
					@foreach (var item in Model)
					{
						<tr>
							<td>
								@Html.DisplayFor(modelItem => item.Id)
							</td>
							<td>
								@Html.DisplayFor(modelItem => item.DatePurchase)
							</td>
							<td>
								@Html.DisplayFor(modelItem => item.Sum)
							</td>
							<td>
								@Html.DisplayFor(modelItem => item.PurchaseStatus)
							</td>
							@*<td>
								<div>
									<button onclick="getBuild(@item.Id)" type="button" class="btn btn-primary btn-lg mb-5" data-bs-toggle="modal" data-bs-target="#updateModal">Изменить</button>
									<button onclick="getBuild(@item.Id)" type="button" class="btn btn-primary btn-lg mb-5" data-bs-toggle="modal" data-bs-target="#deleteModal">Удалить</button>
								</div>
								</td>*@
						</tr>
					}
				</tbody>
			</table>
		</div>
	</div>
	<div class="text-center d-flex flex-column mt-5">

			@*<button type="submit" 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>

@section Styles
	{
	<style>
		tr {
			cursor: pointer;
		}

		.selected {
			background-color: #0d6efd;
			color: white;
		}
	</style>
}

@section Scripts
	{
	<script>
		// get selected row
		// display selected row data in text input

		var table = document.getElementById("table");
		var remove = document.getElementById("delete");
		var inwork = document.getElementById("inwork");
		var ready = document.getElementById("ready");
		var done = document.getElementById("done");
		var order = 0;
		for (var i = 1; i < table.rows.length; i++) {
			table.rows[i].onclick = function () {
				// remove the background from the previous selected row
				if (typeof index !== "undefined") {
					table.rows[index].classList.toggle("selected");
				}
				// get the selected row index
				index = this.rowIndex;
				// add class selected to the row
				this.classList.toggle("selected");
				order = parseInt(this.cells[0].innerText);
				remove.addEventListener("click", () => {
					console.log('try to delete order')
					$.ajax(
						{
							url: `/Storekeeper/DeleteOrder`,
							type: 'POST',
							data: { id: order }
						}
					)
				})
				inwork.addEventListener("click", () => {
					console.log('try to delete order')
					$.ajax(
						{
							url: `/Storekeeper/UpdateOrder`,
							type: 'POST',
							data: { id: order, status: 1 }
						}
					)
				})
				ready.addEventListener("click", () => {
					console.log('try to delete order')
					$.ajax(
						{
							url: `/Storekeeper/UpdateOrder`,
							type: 'POST',
							data: { id: order, status: 2 }
						}
					)
				})
				done.addEventListener("click", () => {
					console.log('try to delete order')
					$.ajax(
						{
							url: `/Storekeeper/UpdateOrder`,
							type: 'POST',
							data: { id: order, status: 3 }
						}
					)
				})
			};
		}

	</script>
}