@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);

	string invoiceReference = !string.IsNullOrEmpty(Model.Reference) ? Model.Reference : Model.Id;

	var payments = Dynamicweb.Ecommerce.Services.ConsolidatedPayments.GetPaymentsByPaidOrderId(Model.Id)
		.Where(payment => payment.IsComplete)
		.ToList();
}

<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("Invoice") @invoiceReference</li>
	</ol>
</nav>

<div class="card mb-4">
	<div class="card-body pb-0 text-center">
		<h1 class="h2 fw-bold mb-2 text-nowrap">@invoiceReference</h1>
		<div class="fs-7">
			<div class="fw-bold lh-1 mb-2">
				<span>@Model.CreatedAt.ToString(Pageview?.Area?.CultureInfo.DateTimeFormat.ShortDatePattern)</span> 
				<span class="fw-bold">@(Model.CustomerCompany)</span>
			</div>
			<small class="d-block text-muted lh-1 mb-2">
				<span>@Translate("Email"): @Model.CustomerEmail</span> |
				<span>@Translate("Phone"): @Model.CustomerPhone</span>
			</small>
		</div>
	</div>
	<div class="card-body pb-0">
		<div class="card border-0" style="--bs-card-bg: rgba(var(--bs-body-color-rgb), .0275);">
			<div class="card-body p-3">
				<div class="grid grid-1 grid-lg-4 gap-4 fs-7 mb-3">
					@if (Model.TryGetOrderState(out var orderState)) 
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("Status")</div>
							<div class="fw-bold" style="color: @(orderState.StateColor?.Hex)">@orderState.Name</div>
						</div>
					}
					@if (Model.DueDate != null)
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("Due date")</div>
							<div>@Model.DueDate?.ToString(Pageview.Area.CultureInfo.DateTimeFormat.ShortDatePattern)</div>
						</div>
					}
					@if (!string.IsNullOrEmpty(Model.PurchaseOrderNumber))
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("PO number")</div>
							<div>@Model.PurchaseOrderNumber</div>
						</div>
					}
					@if (!string.IsNullOrEmpty(Model.CustomerNumber))
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("Customer number")</div>
							<div>@Model.CustomerNumber</div>
						</div>
					}
				</div>
				<div class="grid grid-1 grid-lg-4 gap-4 fs-7">
					@if (!string.IsNullOrEmpty(Model.PaymentMethod?.Name))
					{
						<div>
							<small class="text-muted">@Translate("Payment method")</small> 
							<div>@Model.PaymentMethod.Name</div>
						</div>
					}
					@if (payments.Count() > 0)
					{
						<div>
							<small class="text-muted">@Translate("Payment ID")</small>
							@foreach (var payment in payments) {
								<div>@payment.PaymentOrderId</div>
							}
						</div>
					}
					@if (invoiceReference != null)
					{
						<div>
							<small class="text-muted">@Translate("Invoice number")</small>
							<div>@invoiceReference</div>
						</div>
					}
					@if (Model.CompletedDate != null)
					{
						<div>
							<small class="text-muted">@Translate("Payment date")</small>
							<div>@Model.CompletedDate.Value.ToString(Pageview.Area.CultureInfo.DateTimeFormat.ShortDatePattern)</div>
						</div>
					}
				</div>
			</div>
		</div>
	</div>
	
	<div class="card-body pb-0">
		<address class="mb-0 fs-7">
			<div class="small mb-2 text-muted">@Translate("Billing address")</div>
			<div class="fw-bold">@Model.CustomerCompany</div>
			<div>@Model.CustomerName</div>
			<div>@Model.CustomerAddress</div>
			<div>@Model.CustomerAddress2</div>
			<div>@Model.CustomerZip @Model.CustomerRegion @Model.CustomerCity</div>
			<div>@Model.CustomerCountry?.ToUpperInvariant()</div>
		</address>
	</div>

	<div class="card-body">
		<div class="card overflow-hidden">
			<div class="table-responsive">
				<table class="table">
					<thead>
						<tr>
							<th>@Translate("Number")</th>
							<th>@Translate("Description")</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><span>@orderline.ProductNumber</span></td>
									<td><span class="text-wrap-nowrap">@orderline.ProductName</span></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="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/file-contract.svg")
										</span>
									</div>
									<div class="mt-1">@Translate("No items")</div>
								</td>
							</tr>
						}
					</tbody>
					<tfoot>
						<tr>
							<td colspan="5" 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="5" 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="5" 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="5" 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="5" class="text-end">@Translate("Taxes")</td>
								<td class="text-end"><span class="text-price">@Model.TotalTaxes.PriceFormattedNoSymbol</span></td>
							</tr>
						}
						<tr>
							<td colspan="5" class="text-end fw-semibold">@Translate("Total")</td>
							<td class="text-end"><span class="text-price dw-h6">@Model.Price.PriceFormattedNoSymbol</span></td>
						</tr>
						@if (showPricesWithVat && Model.Price.Vat != 0.0)
						{
							<tr>
								<td colspan="5" class="text-end">@Translate("VAT") @(Model.Price.VATPercent)%</td>
								<td class="text-end"><span class="text-price">@Model.Price.Vat</span></td>
							</tr>
						}
						@if (Model.TotalDiscount.Price != 0.0)
						{
							<tr>
								<td colspan="5" class="text-end">@Translate("Discount")</td>
								<td class="text-end"><span class="text-price">(@Model.TotalDiscount.PriceFormattedNoSymbol)</span></td>
							</tr>
						}
					</tfoot>
				</table>
			</div>
		</div>
	</div>

	@if (!string.IsNullOrEmpty(Model.Comment)) {
		<div class="card-body pt-0">
			<div class="card border-0" style="--bs-card-bg: rgba(var(--bs-body-color-rgb), .0275);">
				<div class="card-body p-3">
					<div class="small mb-2 text-muted">@Translate("Comment")</div>
					<div>@Model.Comment</div>
				</div>
			</div>
		</div>
	}
</div>