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

@{
	string customIconPath = "/Files/icons/";
	string addToCartIcon = Pageview.CurrentParagraph.Item["Icon"] != null ? Pageview.CurrentParagraph.Item["Icon"].ToString() : customIconPath + "cart-shopping.svg";
	string downloadIcon = customIconPath + "download-cloud.svg";
	bool showDownloadAssetsButton = Pageview.CurrentParagraph.Item["ShowDownloadAssetsButton"] != null ? Convert.ToBoolean(Pageview.CurrentParagraph.Item["ShowDownloadAssetsButton"].ToString()) : false;

	string selectedState = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("FilterOrderStateId")) ? Dynamicweb.Context.Current.Request.QueryString.Get("FilterOrderStateId") : "";

	string cartServicePage = "/Default.aspx?ID=" + (GetPageIdByNavigationTag("CartService"));
	if (!cartServicePage.Contains("LayoutTemplate"))
	{
		cartServicePage += cartServicePage.Contains("?") ? "&LayoutTemplate=Swift-v2_MiniCart.cshtml" : "?LayoutTemplate=Swift-v2_MiniCart.cshtml";
	}

	var ecomLanguages = Dynamicweb.Ecommerce.Services.Languages.GetLanguages();
	var assetGroups = Dynamicweb.Ecommerce.Services.DetailsGroups.GetGroups();
	List<string> productIds = new List<string>();
	int languageCount = 0;
}

<div class="h-100" data-dw-colorscheme="@Pageview.CurrentParagraph?.ColorSchemeId">
	<header class="grid grid-1 grid-md-2 align-items-center gap-3 px-2 py-3 border-bottom">
		<h1 class="h6 m-0">@Pageview.CurrentParagraph.Item["Title"]</h1>

		<form id="searchForm" method="get">
			<input type="hidden" name="ID" value="@Pageview.ID">

			<div class="grid grid-1 grid-sm-2 gap-3">
				<div class="input-group">
					<label for="FilterOrderId" class="visually-hidden">@Translate("Search orders")</label>
					<input type="search"
						   class="form-control form-control-sm px-3 py-2 rounded-pill"
						   id="FilterOrderId"
						   name="FilterOrderId"
						   placeholder="@Translate("Search")"
						   aria-label="@Translate("Search")">
				</div>

				<div class="input-group">
					<select class="form-select form-select-sm"
							id="FilterOrderStateId"
							name="FilterOrderStateId"
							aria-label="@Translate("Select state")"
							onchange="this.closest('form').submit()">

						<option value="">@Translate("Select state")</option>

						@if(Model.TryGetOrderStates(out var orderStates) is true)
						{
							foreach (var state in 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 d-none d-lg-table table-striped table-hover table-linked align-middle mb-0">
			<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>
					<th width="50">&nbsp;</th>
					@if (showDownloadAssetsButton)
					{
						<th width="50">&nbsp;</th>
					}
				</tr>
			</thead>
			<tbody class="border-top-0">
				@foreach (var order in Model.Orders)
				{
					string orderLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;OrderId={order.Id}";
					string orderDate = order.CompletedDate.Value.TimeOfDay.Ticks > 0 ? order.CompletedDate.ToString() : order.CompletedDate.Value.ToString(Pageview.Area.CultureInfo.DateTimeFormat.ShortDatePattern);

					string badgeColor = "bg-dark text-white";

					if (order.StateId == "OS2")
					{
						badgeColor = "bg-success text-white";
					}
					else if (order.StateId == "OS3")
					{
						badgeColor = "bg-danger text-white";
					}

					<tr>
						<td>
							<a href="@orderLink" class="d-block text-decoration-none">
								<span>@orderDate</span>
							</a>
						</td>
						<td>
							<a href="@orderLink" class="d-block text-decoration-none" tabindex="-1">
								@if (!string.IsNullOrEmpty(order.IntegrationOrderId) && order.IntegrationOrderId != order.Id)
								{
									<text>@order.IntegrationOrderId (@order.Id)</text>
								}
								else
								{
									@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">
								<span class="badge opacity-75 @badgeColor">@order.StateName</span>
							</a>
						</td>
						@if (showDownloadAssetsButton)
						{
							<td>
								<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#DownloadPanel_@(Pageview.CurrentParagraph.ID)_@(order.Id)" aria-controls="DownloadPanel_@(Pageview.CurrentParagraph.ID)_@(order.Id)" title="@Translate("Download product assets")">
									<span class="icon-2">
										@ReadFile(downloadIcon)
									</span>
								</button>
								<div class="offcanvas offcanvas-end" tabindex="-1" id="DownloadPanel_@(Pageview.CurrentParagraph.ID)_@(order.Id)" aria-labelledby="DownloadPanelLabel_@(Pageview.CurrentParagraph.ID)_@(order.Id)">
									<div class="offcanvas-header justify-content-between">
										<div>
											<h5 class="offcanvas-title" id="DownloadPanelLabel_@(Pageview.CurrentParagraph.ID)_@(order.Id)">@Translate("Download product assets")</h5>
											<div>@Translate("From order"): @order.Id</div>
										</div>
										<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close")"></button>
									</div>
									<div class="offcanvas-body">
										<form action="/dwapi/ecommerce/products/export" class="js-product-export-form">
											<input type="hidden" name="ShopId" value="@Pageview.Area.EcomShopId">
											<input type="hidden" name="TemplatePath" value="/Designs/Swift-v2/eCom/ProductCatalog/ExportProductsMail.cshtml">

											<div class="mb-2">
												<h3 class="h5">@Translate("Product information")</h3>
												<div>@Translate("Select a language and format for your product file")</div>
											</div>

											<div class="mb-3">
												<div class="mb-1">@Translate("Language")</div>
												<select name="LanguageId" id="LanguageId" class="form-select" aria-label="@Translate("Language")">
													@foreach (var language in ecomLanguages)
													{
														string selected = languageCount == 0 ? "selected" : "";

														<option @selected>
															@language.GetDisplayName() (@language.CountryCode)
														</option>

														languageCount++;
													}
												</select>
											</div>

											<div class="form-floating mb-4">
												<select class="form-select bg-white" id="DownloadCartFormatSelector_@(Pageview.CurrentParagraph.ID)_@(order.Id)" name="ExportFormat" aria-label="@Translate("Export format")">
													<option value="">@Translate("None")</option>
													<option value="json" selected>JSON</option>
													<option value="csv">CSV</option>
													<option value="xml">XML</option>
												</select>
												<label for="DownloadCartFormatSelector_@(Pageview.CurrentParagraph.ID)_@(order.Id)">@Translate("Export format")</label>
											</div>

											<div class="mb-2">
												<h3 class="h5">@Translate("Image settings")</h3>
												<div>@Translate("Select a resolution for your images")</div>
											</div>

											<div class="form-floating mb-4">
												<input type="hidden" name="Dpi" id="DownloadCartDpi_@(Pageview.CurrentParagraph.ID)_@(order.Id)" value="72">
												<input type="hidden" name="ImageFormat" id="DownloadCartImageFormat_@(Pageview.CurrentParagraph.ID)_@(order.Id)" value="webp">

												<select class="form-select bg-white" id="DownloadCartImageImageSettingsSelector_@(Pageview.CurrentParagraph.ID)_@(order.Id)" aria-label="@Translate("Resolution")"
														onchange="document.querySelector('#DownloadCartDpi_@(Pageview.CurrentParagraph.ID)_@(order.Id)').value = this.options[this.selectedIndex].getAttribute('data-dpi'); document.querySelector('#DownloadCartImageFormat_@(Pageview.CurrentParagraph.ID)_@(order.Id)').value = this.options[this.selectedIndex].getAttribute('data-image-format');">
													<option data-dpi="72" data-image-format="webp" selected>@Translate("Web images") (webp, dpi: 72)</option>
													<option data-dpi="144" data-image-format="jpg">@Translate("Print images") (jpg, dpi: 144)</option>
													<option data-dpi="300" data-image-format="jpg">@Translate("Press images") (jpg, dpi: 300)</option>
													<option data-dpi="600">@Translate("Origin images")</option>
												</select>
												<label for="DownloadCartImageFormatSelector_@(Pageview.CurrentParagraph.ID)_@(order.Id)">@Translate("Resolution")</label>
											</div>

											<div class="mb-2">
												<h3 class="h5">@Translate("Product assets")</h3>
												<div>@Translate("Optionally select additional product assets to download")</div>
											</div>

											<div class="mb-3">
												<div class="mb-1">@Translate("Image assets")</div>
												<div class="dropdown bg-white js-dropdown">
													<button class="form-select text-start w-100 js-dropdown-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
														@Translate("None")
													</button>
													<div class="dropdown-menu w-100 p-3">
														<div class="form-check" onclick="swift.ProductExport.SelectAllOptions(this);">
															<input class="form-check-input" type="checkbox" name="AssetCategories" data-short-name="@Translate("All")" value="" id="AssetsCheckAll_@(Pageview.CurrentParagraph.ID)_@(order.Id)">
															<label class="form-check-label" for="AssetsCheckAll_@(Pageview.CurrentParagraph.ID)_@(order.Id)">
																@Translate("All")
															</label>
														</div>

														@foreach (var group in assetGroups)
														{
															<div class="form-check" onclick="swift.ProductExport.UpdateSelector(this)">
																<input class="form-check-input" type="checkbox" name="AssetCategories" data-short-name="@group.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID)" value="@group.SystemName" id="Check_@(group.SystemName)_@(Pageview.CurrentParagraph.ID)_@(order.Id)">
																<label class="form-check-label" for="Check_@(group.SystemName)_@(Pageview.CurrentParagraph.ID)_@(order.Id)">
																	@group.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID)
																</label>
															</div>
														}
													</div>
												</div>
											</div>

											<div class="js-recipients">
												<div class="input-group mb-3 w-100 js-recipient-field">
													<div class="form-floating flex-fill">
														<input type="email" class="form-control bg-white js-recipient-email" id="DownloadCartRecipientEmail_@(Pageview.CurrentParagraph.ID)_@(order.Id)" placeholder="@Translate("Send download link to")" required>
														<div class="invalid-feedback">
															@Translate("Please enter an email address")
														</div>
														<label for="DownloadCartRecipientEmail_@(Pageview.CurrentParagraph.ID)_@(order.Id)">@Translate("Send download link to")</label>
													</div>
													<button type="button" class="btn btn-outline-secondary js-recipient-add-btn" onclick="swift.ProductExport.AddRecipent(this)">@Translate("Add")</button>
												</div>
											</div>

											<div class="js-recipient-tokens"></div>

											@foreach (var orderline in order.OrderLines)
											{
												if (!string.IsNullOrEmpty(orderline.ProductId))
												{
													<input type="hidden" name="ProductIds" value="@orderline.ProductId">
												}
											}

											<div class="alert alert-warning mb-2 d-none js-download-images-warning">@Translate("The solution does not have license to download")</div>
											<button type="button" onclick="swift.ProductExport.SetEmailAddresses(this)" class="btn btn-primary w-100" data-dw-button="primary" title="@Translate("Send download link")">@Translate("Send download link")</button>
											<div class="alert alert-success mt-3 d-none js-download-success">@Translate("A download link is sent to the recipients")</div>
										</form>
									</div>
								</div>
							</td>
						}
						<td>
							@if (GetPageIdByNavigationTag("ExpressBuyPage") != 0)
							{
								<a href="/Default.aspx?ID=@GetPageIdByNavigationTag("ExpressBuyPage")&OrderID=@order.Id&redirect=false" class="btn" title="@Translate("Reorder")">
									<span class="icon-2">
										@ReadFile(addToCartIcon)
									</span>
								</a>
							}
							else
							{
								<form method="post" action="@cartServicePage">
									<input type="hidden" name="redirect" value="false">
									<input type="hidden" name="CustomerCenterCmd" value="reorder">
									<input type="hidden" name="OrderId" value="@order.Id">
									<button type="button" onclick="swift.Cart.Update(event)" class="btn" title="@Translate("Reorder")">
										<span class="icon-2">
											@ReadFile(addToCartIcon)
										</span>
									</button>
								</form>
							}
						</td>
					</tr>
				}
			</tbody>
		</table>

		<table class="table d-table d-lg-none table-borderless table-linked table-clean align-top mb-0">

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

				string badgeColor = "bg-dark text-white";

				if (order.StateId == "OS2")
				{
					badgeColor = "bg-success text-white";
				}
				else if (order.StateId == "OS3")
				{
					badgeColor = "bg-danger text-white";
				}

				<tbody class="border-bottom">
					<tr>
						<th>
							<a href="@orderLink" class="d-block text-start text-decoration-none">
								<span class="fs-8">@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>
							<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("Order number")</span>
							</a>
						</th>
						<td>
							<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">
								@if (!string.IsNullOrEmpty(order.IntegrationOrderId) && order.IntegrationOrderId != order.Id)
								{
									<text>@order.IntegrationOrderId (@order.Id)</text>
								}
								else
								{
									@order.Id
								}
							</a>
						</td>
					</tr>
					<tr>
						<th>
							<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@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>
							<a href="@orderLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("OrderState")</span>
							</a>
						</th>
						<td>
							<a href="@orderLink" class="d-block text-end text-decoration-none" tabindex="-1">
								<span class="badge opacity-75 @badgeColor">@order.StateName</span>
							</a>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="@orderLink" class="d-block text-decoration-none" tabindex="-1">
								<div class="d-grid">
									<span class="btn btn-secondary" data-dw-button="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 mt-3" 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>

</div>
