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

@{
	string baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview?.Page?.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);
}

<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("Quote") @(Model.Id)</li>
	</ol>
</nav>

<div class="card mb-4">
	<div class="card-body hstack gap-3 flex-wrap">
		<div class="flex-fill">
			<h1 class="h5 mb-2 text-nowrap">@Translate("Quote Details")</h1>
			<div class="vstack">
				<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))</small>
					}
					@if (Model.TryGetOrderState(out var state))
					{
						<span class="badge lh-sm badge-neutral-light" 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>
		<button class="btn btn-primary btn-sm hstack gap-2 py-2 px-3 align-self-start" data-dw-button
			hx-get="/dwapi/ecommerce/carts/@(Model.Secret)"
			hx-headers='{"x-dw-template": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Orders/Modals/AcceptQuoteModal.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/check.svg")
			</span>
			@Translate("Accept quote")
		</button>
	</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-end">@Translate("Qty")</th>
					<th class="text-end">@Translate("Price")</th>
					<th class="text-end">@Translate("Total")</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 class="text-end">@orderline.Quantity</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>
						</tr>
					}
				}
				else 
				{
					<tr>
						<td colspan="5" 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/file-contract.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>
				</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>
							</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>
					</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>
					</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>
					</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>
				</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>
					</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>
					</tr>
				}
			</tfoot>
		</table>
	</div>
</div>

@if (!string.IsNullOrEmpty(Model.CustomerComment) || !string.IsNullOrEmpty(Model.Comment)) {
	<div class="card mb-4">
		<div class="card-body">
			<h2 class="h5 mb-3">@Translate("Comments")</h2>
			@if (!string.IsNullOrEmpty(Model.CustomerComment))
			{
				<div class="small mb-2 text-muted text-opacity-75">@Translate("Customer")</div>
				<div class="fs-7">@Model.CustomerComment</div>
			}
			@if (!string.IsNullOrEmpty(Model.Comment)) 
			{
				<hr class="text-muted">
				<div class="small mb-2 text-muted text-opacity-75">@Translate("Order")</div>
				<div class="fs-7">@Model.Comment</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>