@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb

@{
	string orderId = !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("OrderID")) ? Dynamicweb.Context.Current.Request.QueryString.Get("OrderID") : "";
	int backPageId = string.IsNullOrEmpty(orderId) ? Dynamicweb.Content.Services.Pages.GetFirstPageForArea(Pageview.AreaID).ID : GetPageIdByNavigationTag("MyAccountDashboardPage");
	backPageId = backPageId == 0 ? Dynamicweb.Content.Services.Pages.GetFirstPageForArea(Pageview.AreaID).ID : backPageId;
	var cartSummaryPageId = Dynamicweb.Content.Services.Pages.GetPageByNavigationTag(Pageview.Area.ID, "CartSummary")?.ID ?? null;

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

@if (!string.IsNullOrEmpty(orderId))
{
	<script type="module">
		window.addEventListener('load', (event) => {
			swift.PageUpdater.Update(document.querySelector('#ExpressBuySearchForm'), true);
		});
	</script>
}

<div class="grid min-vh-lg-100 h-lg-100 item_@Model.Item.SystemName.ToLower()">

	<section class="g-col-12 g-col-lg-8 d-flex flex-column align-content-stretch order-last order-lg-first me-0 me-md-5 position-relative">
		<header class="d-flex flex-grow-0 pb-3 pb-lg-0">
			@if (string.IsNullOrEmpty(orderId))
			{
				<div class="flex-fill">
					<h1 class="h3">@Translate("Express buy")</h1>
					<p class="mb-0">@Translate("Use the search to find your products")</p>
				</div>
			}
			else
			{
				<div class="flex-fill">
					<h1 class="h3">@Translate("Reorder for order"): @orderId</h1>
					<p class="mb-0">@Translate("Review your order before adding it to the cart")</p>
				</div>
			}

			<div class="d-flex align-items-start gap-2">
				<a href="/Default.aspx?id=@backPageId" class="btn btn-link pe-0" data-dw-button="link" id="LeaveExpressBuy">
					<div class="d-flex gap-2 align-items-center lh-base">
						<span class="icon-2">
							@ReadFile(iconPath + "arrow-left.svg")
						</span>
						<span>@Translate("Leave")</span>
					</div>
				</a>
			</div>
		</header>

		@{
			string url = !string.IsNullOrEmpty(orderId) ? $"/Default.aspx?OrderID={orderId}" : "/Default.aspx";
			Dynamicweb.Frontend.LinkViewModel checkoutAnonymousPageId = Model.Item.GetLink("CheckoutAnonymousPageLink");
			string checkoutAnonymousPageUrl = checkoutAnonymousPageId?.Url;
			Dynamicweb.Frontend.LinkViewModel checkoutUserPageId = Model.Item.GetLink("CheckoutUserPageLink");
			string checkoutUserPageUrl = checkoutUserPageId?.Url;
			string checkoutUrl = Pageview.User == null ? checkoutAnonymousPageUrl : checkoutUserPageUrl;
			int quoteCheckoutPageLink = Model.Item?.GetLink("QuoteCheckoutPageLink") != null ? Model.Item.GetLink("QuoteCheckoutPageLink").PageId : 0;
			string searchTerm = string.Empty;
			string defaultQuantityAsZero = Model.Item.GetBoolean("DefaultQuantityAsZero").ToString();
			if (!string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["q"]))
			{
				searchTerm = Dynamicweb.Context.Current.Request["q"];
			}

			string hideSearchField = !string.IsNullOrEmpty(orderId) ? "d-none" : "";
		}

		<form class="position-sticky top-0" action="@url" id="ExpressBuySearchForm" data-response-target-element="ExpressBuyResultsContainer" onsubmit="event.preventDefault()" data-preloader="inline" style="z-index:1;">
			<div class="py-3 py-lg-4 w-100">
				<input type="hidden" name="ID" value="@Model.PageID">
				<input type="hidden" name="feed" value="true">
				<input type="hidden" name="redirect" value="false">
				<input type="hidden" name="isVariant" value="true,false">
				<input type="hidden" name="defaultQuantityAsZero" value="@defaultQuantityAsZero">

				<div class="input-group @hideSearchField" id="ExpressBuySearchFormField">
					<span class="position-absolute top-0 icon-2 px-3 d-flex align-items-center h-100 search-icon" style="z-index: 10;">
						@ReadFile(iconPath + "magnifying-glass.svg")
					</span>
					<label for="search_@Model.ID" class="visually-hidden">@Translate("Search here")</label>
					<input id="search_@Model.ID"
						   class="form-control rounded-pill py-2 ps-5 pe-3"
						   type="search"
						   placeholder="@Translate("Search here")"
						   autocomplete="off"
						   maxlength="255"
						   name="q"
						   value="@searchTerm"
						   onkeyup="document.querySelector('#ExpressBuySearchForm').action = '/Default.aspx'; swift.PageUpdater.Update(document.querySelector('#ExpressBuySearchForm'), true)">
				</div>
			</div>
		</form>

		<script type="module">
	var addForm = document.querySelector('#ExpressBuyAddForm');
	addForm.addEventListener('submit', function (e) {
		e.preventDefault();

		swift.PageUpdater.Update(document.querySelector('#ExpressBuyAddForm'));
		document.querySelector('#ExpressBuyResultsContainer').innerHTML = "";

		document.querySelector('#ExpressBuySearchFormField').classList.remove("d-none");
	});
	addForm.addEventListener('updated.swift.pageupdater', function (event) {
		document.querySelector('#search_@Pageview.CurrentParagraph.ID').value = "";
		document.querySelector('#search_@Pageview.CurrentParagraph.ID').focus();
	});
		</script>

		<form action="/Default.aspx" method="post" id="ExpressBuyAddForm" data-layout-template="Swift-v2_CartSummary.cshtml" data-response-target-element="CartSummaryContainer">
			<input type="hidden" name="ID" value="@Model.PageID">
			<input type="hidden" name="redirect" value="false">
			<input type="hidden" name="cartcmd" value="addmulti">
			<input type="hidden" name="checkoutUrl" value="@checkoutUrl">
			<input type="hidden" name="quoteCheckoutPageLink" value="@quoteCheckoutPageLink">
			<input type="hidden" name="CartType" value="ExpressBuy">

			<div id="ExpressBuyResultsContainer" class="grid gap-2">
				@* Initial form for first load (We pass all the settings to the actual template) *@
				@{
					string productListPageUrl = $"/Default.aspx?ID={GetPageIdByNavigationTag("Shop")}";
				}
				@if (string.IsNullOrEmpty(orderId))
				{
					<div class="js-express-buy-empty-state align-items-center d-flex flex-column flex-grow-1 justify-content-center min-vh-50 g-col-12">
						<div class="d-flex flex-column gap-3 lh-1 align-items-center text-center">
							<span class="icon-7">
								@ReadFile(iconPath + "magnifying-glass.svg")
							</span>
							<h3 class="m-0">@Translate("Go ahead and search")</h3>
							<p class="m-0 fs-7">@Translate("Do you prefer browsing for products? Then click to explore product catalog")</p>
							<a href="@productListPageUrl" class="mt-2 btn btn-secondary" data-dw-button="secondary">@Translate("Explore products")</a>
						</div>
					</div>
				}
			</div>
		</form>

	</section>

	<aside class="g-col-12 g-col-lg-4 order-first order-lg-last" data-dw-colorscheme="@Model.ColorScheme?.Id">

		<div class="h-100">
			@if (!Pageview.IsVisualEditorMode)
			{

				<div id="CartSummaryContainer">
					@* Initial form for first load (We pass all the settings to the actual template) *@
				</div>

				<script type="module">
					window.addEventListener('load', (event) => {
						swift.PageUpdater.Update(document.querySelector("#ExpressBuyAddForm"));
					});
				</script>

				if (cartSummaryPageId != null)
				{
					@* Handle orderline removal asyncronously *@
					<script type="module">
						document.addEventListener('updated.swift.cart', (event) => {
							let orderContext = event?.detail?.formData?.get("OrderContext");
							swift.PageUpdater.UpdateFromUrl(event, '/Default.aspx?ID=@(cartSummaryPageId)&CartType=ExpressBuy&RequestPageID=@(Pageview.Page.ID)&OrderContext=' + orderContext +'', 'Swift-v2_CartSummary.cshtml', document.querySelector('#CartSummaryContainer'));
						});
					</script>
				}
			}
			else
			{
				<div class="alert alert-info" role="alert">
					<span>@Translate("Cart Summary")</span>
				</div>
			}
		</div>

	</aside>

</div>
