@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
@using System.Linq
@using Dynamicweb

@{
	string searchTerm = string.Empty;
	if (!string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["userquery"]))
	{
		searchTerm = Dynamicweb.Context.Current.Request["userquery"];

	}
	string iconPath = "/Files/Images/Icons/";

	var queryItems = GetLoop("QueryResultItem");

	bool nowImpersonating = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("NowImpersonating")) ? Convert.ToBoolean(Dynamicweb.Context.Current.Request.QueryString.Get("NowImpersonating")) : false;
}

<div>
	<header class="px-2 py-3 border-bottom">
		<div class="grid grid-1 grid-sm-2 align-items-center">
			@if (!string.IsNullOrEmpty(searchTerm))
			{
				<div class="d-flex align-items-baseline justify-content-between gap-3">
					<h1 class="h6 mb-0">@Translate("You have searched for") "@searchTerm"</h1>
				</div>
			}
			else
			{
				<h1 class="h6 mb-0">@Translate("Manage customer")</h1>
			}
			<div class="position-relative type-ahead-dropdown">
				<form method="get" class="suggest-form">
					<div class="d-flex align-items-center">
						<label for="userQuery_@Pageview.CurrentParagraph.ID" class="visually-hidden">@Translate("Search for customer")</label>
						<span class="position-absolute icon-2 reset-search px-3">
							@ReadFile(iconPath + "magnifying-glass.svg")
						</span>
						<input id="userQuery_@Pageview.CurrentParagraph.ID"
							   type="search"
							   class="form-control form-control-sm rounded-pill type-ahead-field py-2 ps-5 pe-5"
							   placeholder="@Translate("Search for customer")"
							   aria-label="@Translate("Search for customer")"
							   aria-describedby="userQuery_@Pageview.CurrentParagraph.ID"
							   name="userquery"
							   value="@searchTerm"
							   data-original="@searchTerm">

						<button type="button"
								onclick="var f = document.getElementById('userQuery_@Pageview.CurrentParagraph.ID'); f.value = ''; f.focus(); f.closest('form').submit();"
								class="btn position-absolute end-0 icon-2 reset-search"
								aria-label="@Translate("Clear search field")"
								style="opacity: 0; visibility: hidden;">
							@ReadFile(iconPath + "xmark.svg")
						</button>
					</div>
				</form>
			</div>
		</div>
	</header>


	@if (queryItems.Count() != 0)
	{

		@* Bootstrap only support horizontally scrolled tables. Thus, we need to have separate designs for large and small screens.  *@

		<table class="table d-none d-lg-table table-striped table-hover table-linked align-middle mb-0">
			<thead>
				<tr>
					<th>
						@Translate("ID")
					</th>
					<th>
						@Translate("Customer")
					</th>
					<th>
						@Translate("Email")
					</th>
					<th>
						@Translate("Address")
					</th>
					<th aria-hidden="true">
						<span>
							&nbsp;
						</span>
					</th>
				</tr>
			</thead>
			<tbody class="border-top-0">
				@foreach (var result in queryItems)
				{
					string UserLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;DWExtranetSecondaryUserSelector={result.GetInteger("UserID")}&NowImpersonating=True";
					bool hasAddressFormat = Dynamicweb.Ecommerce.International.Country.GetDisplayAddress(result.GetString("CountryCode")).Any();

					<tr class="position-relative">
						<td>
							@if (!string.IsNullOrWhiteSpace(result.GetString("UserID")))
							{
								<a href="@UserLink" class="d-block text-decoration-none">
									@result.GetInteger("UserID")
								</a>
							}
						</td>
						<td>
							@if (!string.IsNullOrWhiteSpace(result.GetString("Name")))
							{
								<a href="@UserLink" class="d-block text-decoration-none" tabindex="-1">
									@result.GetString("Name")
								</a>
							}
						</td>
						<td>
							@if (!string.IsNullOrWhiteSpace(result.GetString("UserEmail")))
							{
								<a href="@UserLink" class="d-block text-decoration-none" tabindex="-1">
									@result.GetString("UserEmail")
								</a>
							}
						</td>
						<td>
							<a href="@UserLink" class="d-block text-decoration-none" tabindex="-1">

							@{
								if (!string.IsNullOrWhiteSpace(result.GetString("Address")))
								{
									<text>
										@result.GetString("Address"),
									</text>
								}
								if (!string.IsNullOrEmpty(result.GetString("Address2")))
								{
									@result.GetString("Address2");
								}
								if (!string.IsNullOrWhiteSpace(result.GetString("Zip")))
								{
									@result.GetString("Zip")
								}
								if (!string.IsNullOrWhiteSpace(result.GetString("City")))
								{
									@result.GetString("City")
								}
								if (!string.IsNullOrEmpty(result.GetString("State")))
								{
									var countryCode = !string.IsNullOrEmpty(result.GetString("CountryCode")) ? result.GetString("CountryCode") : Pageview.Area.EcomCountryCode;
									string stateName = Dynamicweb.Ecommerce.Services.Countries.GetRegion(countryCode, result.GetString("State"))?.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID) ?? string.Empty;
                        
									@stateName
								}
								if (!string.IsNullOrEmpty(result.GetString("CountryCode")))
								{
									var countryCode = !string.IsNullOrEmpty(result.GetString("CountryCode")) ? result.GetString("CountryCode") : Pageview.Area.EcomCountryCode;
									string countryName = Dynamicweb.Ecommerce.Services.Countries.GetCountry(countryCode)?.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID) ?? string.Empty;
	                            
									@countryName
								}
							}
							&nbsp;
							</a>
						</td>
						<td class="text-end">
							<a href="@UserLink" class="d-block text-decoration-none" tabindex="-1">
								<span class="btn btn-sm btn-secondary" data-dw-button="secondary">
									@Translate("Manage customer")
								</span>
							</a>
						</td>
					</tr>
				}
			</tbody>
		</table>

		@* Bootstrap only support horizontally scrolled tables. Thus, we need to have separate designs for large and small screens.  *@

		<table class="table d-table d-lg-none table-borderless table-clean align-top mb-0">
			@foreach (var result in queryItems)
			{
				string UserLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;DWExtranetSecondaryUserSelector={result.GetInteger("UserID")}&NowImpersonating=True";

				<tbody class="border-bottom">
					<tr>
						<th class="fs-8">
							@Translate("ID")
						</th>
						<td class="text-end">
							@if (!string.IsNullOrWhiteSpace(result.GetString("UserID")))
							{
								@result.GetInteger("UserID")
							}
						</td>
					</tr>
					<tr>
						<th class="fs-8">
							@Translate("Customer")
						</th>
						<td class="text-end">
							@if (!string.IsNullOrWhiteSpace(result.GetString("Name")))
							{
								@result.GetString("Name")
							}
						</td>
					</tr>
					<tr>
						<th class="fs-8">
							@Translate("Email")
						</th>
						<td class="text-end text-break">
							@if (!string.IsNullOrWhiteSpace(result.GetString("UserEmail")))
							{
								@result.GetString("UserEmail")
							}
						</td>
					</tr>
					<tr>
						<th class="fs-8">
							@Translate("Address")
						</th>
						<td class="text-end">
							@{
								if (!string.IsNullOrWhiteSpace(result.GetString("Address")))
								{
									<text>
										@result.GetString("Address"),
									</text>
								}
								if (!string.IsNullOrEmpty(result.GetString("Address2")))
								{
									@result.GetString("Address2");
								}
								if (!string.IsNullOrWhiteSpace(result.GetString("Zip")))
								{
									@result.GetString("Zip")
								}
								if (!string.IsNullOrWhiteSpace(result.GetString("City")))
								{
									@result.GetString("City")
								}
								if (!string.IsNullOrEmpty(result.GetString("State")))
								{
									var countryCode = !string.IsNullOrEmpty(result.GetString("CountryCode")) ? result.GetString("CountryCode") : Pageview.Area.EcomCountryCode;
									string stateName = Dynamicweb.Ecommerce.Services.Countries.GetRegion(countryCode, result.GetString("State"))?.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID) ?? string.Empty;
                        
									@stateName
								}
								if (!string.IsNullOrEmpty(result.GetString("CountryCode")))
								{
									var countryCode = !string.IsNullOrEmpty(result.GetString("CountryCode")) ? result.GetString("CountryCode") : Pageview.Area.EcomCountryCode;
									string countryName = Dynamicweb.Ecommerce.Services.Countries.GetCountry(countryCode)?.GetName(Dynamicweb.Ecommerce.Common.Context.LanguageID) ?? string.Empty;
	                            
									@countryName
								}
							}
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="@UserLink" class="d-block text-decoration-none swift_manage-customer-button">
								<div class="d-grid">
									<span class="btn btn-sm btn-secondary" data-dw-button="secondary">
										@Translate("Manage customer")
									</span>
								</div>
							</a>
						</td>
					</tr>
				</tbody>
			}
		</table> var pageLoopItem = GetLoop("DwPaging.LoopPageGroup");
		int pageCount = GetInteger("DwPaging.PageCount"),
			currentPage = GetInteger("DwPaging.CurrentPage"),
			prevPage = GetInteger("DwPaging.PreviousPageNumber"),
			nextPage = GetInteger("DwPaging.NextPageNumber"),
			itemsToLoad = 10,
			pageSize = GetInteger("DwPaging.PageSize"),
			totalItems = GetInteger("DwPaging.TotalItems"),
			loadMore = pageSize + itemsToLoad,
			firstPage = 1,
			lastPage = pageCount;

		if (GetBoolean("DwPaging.Pageable") == true)
		{
			string prevDisabled = currentPage == 1 ? "disabled" : "";
			string nextDisabled = currentPage == pageCount ? "disabled" : "";
			<div class="d-none d-lg-block">
				<form id="pagination_@Pageview.CurrentParagraph.ID">
					<div class="p-3 mt-3">
						<ul class="pagination m-0">
							<li class="page-item @(prevDisabled)">
								<button type="submit" class="page-link" onclick="paginationSubmit(event, '@firstPage')">
									<span class="icon-2">
										@ReadFile(iconPath + "chevrons-left.svg")
									</span>
								</button>
							</li>
							<li class="page-item @(prevDisabled)">
								<a class="page-link" href="@prevPage" onclick="paginationSubmit(event, '@prevPage')">
									<span class="icon-2">
										@ReadFile(iconPath + "chevron-left.svg")
									</span>
								</a>
							</li>
							@foreach (var pages in pageLoopItem)
							{
								var css = pages.GetBoolean("PageGroup.ActivePage") ? "page-item active" : "page-item";

								<li class="@css">
									<a href="@pages.GetString("PageGroup.PageLink")" class="page-link" onclick="paginationSubmit(event, '@pages.GetInteger("PageGroup.PageNumber")')">@pages.GetInteger("PageGroup.PageNumber")</a>
								</li>
							}
							<li class="page-item @(nextDisabled)">
								<a class="page-link" href="@nextPage" onclick="paginationSubmit(event, '@nextPage')">
									<span class="icon-2">
										@ReadFile(iconPath + "chevron-right.svg")
									</span>
								</a>
							</li>
							<li class="page-item @(nextDisabled)">
								<button type="submit" class="page-link" onclick="paginationSubmit(event, '@lastPage')">
									<span class="icon-2">
										@ReadFile(iconPath + "chevrons-right.svg")
									</span>
								</button>
							</li>
						</ul>
					</div>
					<input type="hidden" name="pagenum" id="pageNumber_@Pageview.CurrentParagraph.ID">
				</form>
				<script>
				paginationSubmit = function (event, pageNumber) {
					event.preventDefault();
					document.querySelector('#pageNumber_@Pageview.CurrentParagraph.ID').value = pageNumber;
					swift.PageUpdater.Update(document.querySelector("#pagination_@Pageview.CurrentParagraph.ID"));
				}
				</script>
			</div>
			<div class="d-block d-lg-none position-sticky bottom-0">
				<form id="loadMore_@Pageview.CurrentParagraph.ID">
					<input type="hidden" name="pagesize" id="pageSize_@Pageview.CurrentParagraph.ID">
					<div class="gap-2 grid grid-1 mx-3 pb-2">
						<button class="btn btn-primary w-100" data-dw-button="primary" type="submit" onclick="loadMore(event, '@loadMore')">
							@Translate("Show more")
						</button>
						<div class="text-center fs-8">Showing @pageSize/@totalItems</div>
					</div>
				</form>
				<script>
			loadMore = function (event, pageSize) {
				event.preventDefault();
				document.querySelector('#pageSize_@Pageview.CurrentParagraph.ID').value = pageSize;
				swift.PageUpdater.Update(document.querySelector("#loadMore_@Pageview.CurrentParagraph.ID"));
			}
				</script>
			</div>
		}
	}
	else
	{
		if (!string.IsNullOrEmpty(searchTerm))
		{
			<div class="alert alert-info text-center mt-3" role="alert">
				@Translate("Your search ") <strong> "@searchTerm" </strong>@Translate("did not return any customers that match your search")
			</div>
		}
		else
		{
			<div class="alert alert-info text-center mt-3" role="alert">
				@Translate("You have no customer you can sign in as")
			</div>
		}
	}

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

	@if (nowImpersonating)
	{
		<div class="position-fixed bottom-0 end-0 p-3">
			<div id="signInToast" class="toast align-items-center w-auto show" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="d-flex">
					<div class="toast-body p-3 fs-6">
						<span>
							@Translate("You are now signed in as a customer")
						</span>
						@if (Pageview.User != null)
						{
							<span class="fw-bold">@Pageview.User.Name</span>
						}
					</div>
					<button type="button" class="btn h-100 icon-3 m-auto" data-bs-dismiss="toast" aria-label="@Translate("Close toast")">@ReadFile(iconPath + "xmark.svg")</button>
				</div>
			</div>
		</div>

		<script>
			document.addEventListener("DOMContentLoaded", function (event) {
				var signInToast = document.querySelector('#signInToast')
				var showSignInToast = new bootstrap.Toast(signInToast)
				showSignInToast.show()
			});
		</script>
	}

</div>
