@inherits ViewModelTemplate<OrderViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Ecommerce.Orders
@using Dynamicweb.Ecommerce.ProductCatalog
@using System.Globalization

@{
	string baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview?.Page?.ID}");
	string cartDetailsUrl = $"{baseUrl}?OrderId={Model.Id}";
	var showPricesWithVat = Dynamicweb.Ecommerce.Common.Context.DisplayPricesWithVat;
	var orderlines = Model.OrderLines?.Where(x => x.OrderLineType != OrderLineType.ProductDiscount && (!string.IsNullOrEmpty(x.ProductId) || !string.IsNullOrEmpty(x.ProductNumber)));
	var orderDiscounts = Model.OrderLines?.Where(x => x.OrderLineType is OrderLineType.Discount);
	bool isActiveCart = Dynamicweb.Ecommerce.Common.Context.Cart?.Id == Model.Id;
}

<nav aria-label="breadcrumb">
	<ol class="breadcrumb mb-4">
		<li class="breadcrumb-item"><a href="@(baseUrl)">@(Pageview?.Page?.GetDisplayName())</a></li>
		<li class="breadcrumb-item active" aria-current="page">@Translate("Cart") @Model.Id</li>
	</ol>
</nav>

<div class="card mb-4" data-swift-cart-details>
	<div class="card-body hstack gap-3 flex-wrap">
		<div class="flex-fill">

			<div class="hstack gap-2 mb-2">
				<h1 class="h5 m-0 text-nowrap">@Translate("Cart Details")</h1>
				<button class="btn btn-icon rounded-circle"
					hx-trigger="click"
					hx-get="/dwapi/ecommerce/carts/@(Model.Secret)" 
					hx-headers='{"x-dw-template": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Orders/Modals/RenameCartModal.cshtml", "x-dw-culture": "@(Pageview?.Area?.CultureInfo?.Name)", "accept": "text/html"}'
					hx-target="main"
					hx-swap="beforeend"
					data-bs-toggle="tooltip"
					data-bs-title="@Translate("Edit cart")"
				>
					<span class="icon">
						@ReadFile("/Files/Images/Icons/pen.svg")
					</span>
				</button>
			</div>

			<div class="vstack">
				@if (!string.IsNullOrEmpty(Model.DisplayName))
				{
					<h2 class="h6 lh-1 mb-2">@(Model.DisplayName)</h2>
				}
				<small class="text-muted lh-1 mb-2">@Translate("ID"): <span class="fw-bold">@(Model.Id)</span></small>
				<small class="text-muted lh-1 mb-2">@Translate("Currency"): <span class="fw-bold">@(Model.Price.CurrencyCode)</span></small>
				<div class="hstack gap-2">
					@if (Model.CompletedDate.HasValue)
					{
						<small class="text-muted lh-1">@Translate("Placed on") @(Model.CompletedDate.Value.ToString(Pageview?.Area?.CultureInfo ?? CultureInfo.InvariantCulture))</small>			
					}
					@if (Model.TryGetOrderState(out var state))
					{
						<span class="badge lh-sm badge-neutral-light pe-none" style="@(state.StateColor is not null ? $"background-color: color-mix(in srgb, {state.StateColor?.Hex} 20%, transparent) !important; color: {state.StateColor?.Hex} !important" : null)">
							@Translate(state.Name)
						</span>
					}
				</div>
			</div>
	
		</div>

		<div class="hstack flex-wrap gap-2 align-self-start">
			<button type="button" class="btn btn-outline-primary btn-sm hstack gap-2 py-2 px-3" data-dw-button
				hx-trigger="click"
				hx-get="/dwapi/ecommerce/carts/@(Model.Secret)" 
				hx-headers='{"x-dw-template": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Orders/Modals/CheckoutCartModal.cshtml", "x-dw-culture": "@(Pageview?.Area?.CultureInfo?.Name)", "accept": "text/html"}'
				hx-target="main"
				hx-swap="beforeend"
			>
				<span class="icon-2">
					@ReadFile("/Files/Images/Icons/cart-shopping.svg")
				</span>
				@Translate("Go to checkout")
			</button>
			
			@if(!isActiveCart)
			{
				<button type="button" class="btn btn-primary btn-sm hstack gap-2 py-2 px-3" data-dw-button
					hx-get="@(baseUrl)"
					hx-trigger="click"
					hx-replace-url="false"
					hx-vals='{"CartID": "@Model.Id", "CartCmd": "setcart"}'
					hx-swap="outerHTML"
					hx-target="[data-swift-cart-details]"
					hx-select="[data-swift-cart-details]"
				>
					<span class="icon-2">
						@ReadFile("/Files/Images/Icons/circle-check.svg")
					</span>
					@Translate("Set as active")
				</button>
			}
			else 
			{
				<div class="hstack gap-2">
					<span class="icon-2 text-success align-self-auto">
						@ReadFile("/Files/Images/Icons/circle-check.svg")
					</span>
					<span class="fs-7">@Translate("Active cart")</span>
				</div>
			}
		</div>
	</div>
	<hr class="text-muted mx-4 my-0">
	<div class="card-body table-responsive">
		<table class="table">
			<thead>
				<tr>
					<th>@Translate("Item")</th>
					<th class="text-center">@Translate("Unit")</th>
					<th class="text-center">@Translate("Qty")</th>
					<th class="text-end">@Translate("Price")</th>
					<th class="text-end">@Translate("Total")</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				@if (orderlines?.Count() > 0)
				{	
					foreach (var orderline in orderlines.Reverse())
					{
						<tr>
							<td>
								<div class="hstack gap-3">
									@if(orderline.GetProduct()?.DefaultImage.TryGetImageFileViewModel(out var image) is true)
									{
										<div class="img-thumbnail">
											<img src="@(image?.ToGetImage(new(){Height = 30, Width = 30, Ratio = "1/1", Crop = Dynamicweb.Imaging.ImageHandling.CropMode.KeepAspectRatio }))" alt="@(orderline.ProductName)">
										</div>
									}
									
									<div class="vstack my-auto">
										<div class="text-wrap-nowrap fw-bold">@orderline.ProductName</div>
										<div class="text-muted">
											<span>@orderline.ProductNumber</span> 
											@if (!string.IsNullOrEmpty(orderline.ProductVariantName))
											{
												<span>- @orderline.ProductVariantName</span> 
											}
										</div>
									</div>
								</div>
							</td>
							<td class="text-center">@orderline.UnitName</td>
							<td>
								<div class="d-flex justify-content-center">
									<form method="post"
										action="@(cartDetailsUrl)"
										hx-post="@(cartDetailsUrl)"
										hx-target="[data-swift-cart-details]"
										hx-select="[data-swift-cart-details]"
										hx-swap="outerHTML"
									>
										<input type="hidden" name="CartID" value="@Model.Id">
										<input type="hidden" name="CartCmd" value="updateorderlines">
										<input type="hidden" name="key" value="@orderline.Id">

										@RenderPartial("Components/QuantitySelectorOrderline.cshtml", orderline)
									</form>
								</div>
							</td>
							<td class="text-end">
								<div class="vstack align-self-auto text-end">
									@if(orderline.OrderLineType == OrderLineType.Discount)
									{
										<div class="text-price">@Translate("Free")</div>
									}
									else if (orderline.HasProductDiscount())
									{
										<div class="text-price text-decoration-line-through text-muted">@orderline.UnitPrice.PriceFormattedNoSymbol</div>
										<div class="text-price">@orderline.UnitPriceWithProductDiscount.PriceFormattedNoSymbol</div>
									}
									else
									{
										<div class="text-price">@orderline.UnitPrice.PriceFormattedNoSymbol</div>
									}
								</div>
							</td>
							<td class="text-end">
								<div class="vstack align-self-auto text-end">
									@if(orderline.HasProductDiscount())
									{
										<div class="text-price text-decoration-line-through text-muted">@orderline.Price.PriceFormattedNoSymbol</div>
										<div class="text-price">@orderline.TotalPriceWithProductDiscounts.PriceFormattedNoSymbol</div>
									}
									else
									{
										<div class="text-price">@orderline.Price.PriceFormattedNoSymbol</div>
									}
								</div>
							</td>
							<td class="text-end">
								<form method="post"
									action="@(cartDetailsUrl)"
									class="d-inline-flex m-0"
									hx-post
									hx-target="[data-swift-cart-details]"
									hx-select="[data-swift-cart-details]"
									hx-swap="outerHTML"
								>
									<input type="hidden" name="CartID" value="@Model.Id">
									<input type="hidden" name="CartCmd" value="DelOrderLine">
									<input type="hidden" name="key" value="@orderline.Id">

									<button type="submit" class="btn btn-link btn-sm text-danger p-1 lh-1" title="@Translate("Remove")" aria-label="@Translate("Remove")" tabindex="-1">
										<span class="icon">
											@ReadFile("/Files/Images/Icons/trash.svg")
										</span>
									</button>
								</form>
							</td>
						</tr>
					}
				}
				else 
				{
					<tr>
						<td colspan="6" class="py-3 text-center text-muted">
							<div class="d-grid rounded-circle m-auto" style="width:4rem;aspect-ratio:1;background-color:rgba(var(--bs-body-color-rgb), .0275);">
								<span class="icon-4">
									@ReadFile("/Files/Images/Icons/cart-shopping.svg")
								</span>
							</div>
							<div class="mt-1">@Translate("No items")</div>
						</td>
					</tr>
				}
			</tbody>
			<tfoot>
				<tr>
					<td colspan="4" class="text-end fw-semibold">@Translate("Subtotal")</td>
					<td class="text-end">
						@if (Model.TotalProductDiscount.Price != 0.0)
						{
							<span class="text-price text-muted text-decoration-line-through">@(Model.TotalPriceWithoutDiscountsFeesAndTaxes.PriceFormattedNoSymbol)</span>
						}
						<span class="text-price">
							@(Model.TotalPriceWithoutOrderDiscountsAndFeesAndTaxes.PriceFormattedNoSymbol)
						</span>
					</td>
					<td>&nbsp;</td>
				</tr>
				@if (orderDiscounts != null)
				{
					foreach (var discount in orderDiscounts)
					{
						if ( string.IsNullOrEmpty(discount?.ProductId) || string.IsNullOrEmpty(discount?.ProductNumber ))
						{
							<tr>
								<td colspan="4" class="text-end">@discount?.ProductName</td>
								<td class="text-end"><span class="text-price">@discount?.Price.PriceFormattedNoSymbol</span></td>
								<td>&nbsp;</td>
							</tr>
						}
					}
				}
				@if (Model.ShippingFee.Price != 0.0)
				{
					<tr>
						<td colspan="4" class="text-end">@Translate("Shipping")</td>
						<td class="text-end"><span class="text-price">@Model.ShippingFee.PriceFormattedNoSymbol</span></td>
						<td>&nbsp;</td>
					</tr>
				}
				@if (Model.PaymentFee.Price != 0.0)
				{
					<tr>
						<td colspan="4" class="text-end">@Translate("Payment")</td>
						<td class="text-end"><span class="text-price">@Model.PaymentFee.PriceFormattedNoSymbol</span></td>
						<td>&nbsp;</td>
					</tr>
				}
				@if (Model.TotalTaxes.Price != 0.0) {
					<tr>
						<td colspan="4" class="text-end">@Translate("Taxes")</td>
						<td class="text-end"><span class="text-price">@Model.TotalTaxes.PriceFormattedNoSymbol</span></td>
						<td>&nbsp;</td>
					</tr>
				}
				<tr>
					<td colspan="4" class="text-end fw-semibold">@Translate("Total")</td>
					<td class="text-end">
						<h6 class="text-price m-0">@Model.Price.PriceFormattedNoSymbol</h6>
						@if (Model.Price.TryGetVatLabel(out string vatLabel)) {
							<small class="opacity-85">@Translate(vatLabel)</small>
						}
					</td>
					<td>&nbsp;</td>
				</tr>
				@if (showPricesWithVat && Model.Price.Vat != 0.0)
				{
					<tr>
						<td colspan="4" class="text-end border-0">@Translate("VAT") @(Model.Price.VATPercent)%</td>
						<td class="text-end border-0"><span class="text-price">@Model.Price.Vat</span></td>
						<td class="border-0">&nbsp;</td>
					</tr>
				}
				@if (Model.TotalDiscount.Price != 0.0)
				{
					<tr>
						<td colspan="4" class="text-end border-0">@Translate("Discount")</td>
						<td class="text-end border-0"><span class="text-price">(@Model.TotalDiscount.PriceFormattedNoSymbol)</span></td>
						<td class="border-0">&nbsp;</td>
					</tr>
				}
			</tfoot>
		</table>
	</div>
</div>

<div class="card mb-4">
	<div class="card-body">
		<h2 class="h5 mb-3">@Translate("Shipping Information")</h2>
		<div class="d-grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
			<address class="mb-0 fs-7">
				<div class="small mb-2 text-muted text-opacity-75">@Translate("Shipping Address")</div>
				<div>@Model.DeliveryCompany</div>
				<div>@Model.DeliveryName</div>
				<div>@Model.DeliveryAddress</div>
				<div>@Model.DeliveryAddress2</div>
				<div>@Model.DeliveryZip @Model.DeliveryRegion @Model.DeliveryCity</div>
				<div>@Model.DeliveryCountry?.ToUpperInvariant()</div>
			</address>
			<div class="vstack gap-4 fs-7">
				<div>
					<div class="small mb-2 text-muted text-opacity-75">@Translate("Shipping Method")</div>
					<div>@Model.ShippingMethod?.Name</div>
				</div>
				@if (!string.IsNullOrEmpty(Model.TrackAndTraceURL) || !string.IsNullOrEmpty(Model.TrackAndTraceNumber))
				{
					<div>
						<div class="small mb-2 text-muted text-opacity-75">@Translate("Tracking Number")</div>
						<div>
							@if (!string.IsNullOrEmpty(Model.TrackAndTraceURL))
							{
								<a href="@Model.TrackAndTraceURL" target="_blank">@(!string.IsNullOrEmpty(Model.TrackAndTraceNumber) ? $"{Model.TrackAndTraceNumber} ({Model.TrackAndTraceName})" : Model.TrackAndTraceName)</a>
							}
							else
							{
								<span>@Model.TrackAndTraceNumber</span>
							}
						</div>
					</div>
				}
			</div>
		</div>
	</div>
</div>

<div class="card mb-4">
	<div class="card-body">
		<h2 class="h5 mb-3">@Translate("Billing Information")</h2>
		<div class="d-grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
			<address class="mb-0 fs-7">
				<div class="small mb-2 text-muted text-opacity-75">@Translate("Billing Address")</div>
				<div>@Model.CustomerCompany</div>
				<div>@Model.CustomerName</div>
				<div>@Model.CustomerEmail</div>
				<div>@Model.CustomerPhone</div>
				<div>@Model.CustomerAddress</div>
				<div>@Model.CustomerAddress2</div>
				<div>@Model.CustomerZip @Model.CustomerRegion @Model.CustomerCity</div>
				<div>@Model.CustomerCountry?.ToUpperInvariant()</div>
			</address>
			<div class="vstack gap-4 fs-7">
				<div>
					<div class="small mb-2 text-muted text-opacity-75">@Translate("Payment Method")</div>
					<div>@Model.PaymentMethod?.Name</div>
				</div>
			</div>
		</div>
	</div>
</div>