@inherits ViewModelTemplate<OrderListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend

@{ 
    string selectedState = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("FilterOrderStateId")) ? Dynamicweb.Context.Current.Request.QueryString.Get("FilterOrderStateId") : "";
	int Count = 0;
}

<header class="p-3 border-bottom d-flex flex-row align-items-center gap-3">
	<h1 class="h6 m-0 flex-fill text-muted d-none d-lg-block">@Pageview.CurrentParagraph.Item["Title"]</h1>

	<form id="searchForm" method="get" class="flex-fill flex-lg-grow-0">
		<input type="hidden" name="ID" value="@Pageview.ID">

		<div class="d-flex flex-row gap-3">
			<div class="input-group input-group-sm">
				<label for="FilterOrderId" class="visually-hidden">@Translate("Search orders")</label>
				<input type="search" class="form-control form-control-sm fs-6 rounded-pill" id="FilterOrderId" name="FilterOrderId" placeholder="@Translate("Search")">
			</div>

			<div class="input-group input-group-sm">
				<select class="form-select fs-6" id="FilterOrderStateId" name="FilterOrderStateId" onchange="this.closest('form').submit()">
					<option value="">@Translate("Select state")</option>
					@foreach (var state in Dynamicweb.Ecommerce.Common.Application.OrderStates)
					{
						string selected = state.Id == selectedState ? "selected" : "";
						<option value="@state.Id" @selected>@state.Name</option>
					}
				</select>
			</div>
		</div>
	</form>
</header>


@if (Model.Orders.Count() != 0)
{
	<table class="table table-striped table-hover table-linked d-none d-lg-table">
		<thead>
			<tr>
				<th>@Translate("Placed")</th>
				<th>@Translate("Order number")</th>
				<th class="text-end">@Translate("Total")</th>
				<th class="text-end">@Translate("OrderState")</th>
			</tr>
		</thead>

		@foreach (var order in Model.Orders)
		{
			string orderLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;OrderId={order.Id}";

			<tr>
				<td>
					<a href="@orderLink" class="d-block text-decoration-none">@order.CompletedDate</a>
				</td>
				<td>
					<a href="@orderLink" class="d-block text-decoration-none" tabindex="-1">@order.Id</a>
				</td>
				<td>
					<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">
						<span class="text-price">@order.Price.PriceFormatted</span>
					</a>
				</td>
				<td>
					<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">@order.StateName</a>
					<br/>
					@foreach (var orderline in order.OrderLines)
					{
						if(orderline.ProductId != "")
						{
							<p>@orderline.ProductName</p>
							<form method="post" class="col-md-12">
								<input type="hidden" name="ProductId" value="@orderline.ProductId" />
								<input type="hidden" name="VariantId" value="@orderline.ProductVariantId" />
								<button class="btn btn-primary pull-right" type="submit" name="CartCmd" value="Add">Add</button>
							</form>
						}
					}

					<form method="post" class="col-md-12">
						
						@foreach (var orderline in order.OrderLines)
						{
							if(orderline.ProductId != "")
							{
								Count = Count +1;

								string ProductLoopCounter = "ProductLoopCounter" + Count;
								string ProductIDCounter = "ProductID" + Count;
								string QuantityCounter = "Quantity" + Count;

								<input type="text" name="@ProductLoopCounter" id="@ProductLoopCounter" value="@Count" />
								<input type="text" name="@ProductIDCounter" id="@ProductIDCounter" value="@orderline.ProductId" />
								<input type="text" name="@QuantityCounter" value="@orderline.Quantity" />
							}
						}

						<!--One button to add to cart-->
						<button class="btn btn-primary pull-right" type="submit" name="CartCmd" value="addmulti">Addmulti</button>
						<button class="btn btn-primary pull-right" type="submit" name="CartCmd" value="setmulti">Setmulti</button>

					</form>

				</td>
			</tr>
		}
	</table>

	<table class="table table-linked table-clean d-lg-none">
		@foreach (var order in Model.Orders)
		{
			string orderLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;OrderId={order.Id}";

			<tbody>
				<tr>
					<th class="text-muted fw-normal">
						<a href="@orderLink" class="d-block text-start text-decoration-none">
							<span class="fs-8 text-muted">@Translate("Placed")</span>
						</a>
					</th>
					<td>
						<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">@order.CompletedDate</a>
					</td>
				</tr>
				<tr>
					<th class="text-muted fw-normal">
						<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
							<span class="fs-8 text-muted">@Translate("Order number")</span>
						</a>
					</th>
					<td>
						<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">@order.Id</a>
					</td>
				</tr>
				<tr>
					<th class="text-muted fw-normal">
						<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
							<span class="fs-8 text-muted">@Translate("Total")</span>
						</a>
					</th>
					<td>
						<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">
							<span class="text-price">@order.Price.PriceFormatted</span>
						</a>
					</td>
				</tr>
				<tr>
					<th class="text-muted fw-normal">
						<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
							<span class="fs-8 text-muted">@Translate("OrderState")</span>
						</a>
					</th>
					<td>
						<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">@order.StateName</a>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">
							<div class="d-grid">
								<span class="btn btn-secondary">@Translate("View order details")</span>
							</div>
						</a>
					</td>
				</tr>
			</tbody>
		}
	</table>

	if (Model.PageCount > 1) {
		<div class="p-3 mt-3">
			<ul class="pagination m-0">
				@for (int i = 1; i <= Model.PageCount; i++)
				{
					var css = (i == Model.CurrentPage) ? "page-item active" : "page-item";

					<li class="@css">
						@string.Format("<a class=\"page-link\" href=\"javascript:goToPage({0});\">{0}</a>", i)
					</li>
				}
			</ul>
		</div>
	}
} else {
	<div class="alert alert-info text-center" role="alert">
		@Translate("No orders found")
	</div>
}

<script>
	function goToPage(page){
		let url = new URL(document.location.href);
		url.searchParams.set('PageNum', page); 
		document.location.href = url;
	}
</script>