@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 orderlines = Model.OrderLines;
}

<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("Payment") @(Model?.Id)</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">@(Model?.Id)</h1>
		<div class="fs-7">
			<div class="fw-bold lh-1 mb-2">
				@if (Model?.CreatedAt != null)
				{
					<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">
				@if (!string.IsNullOrEmpty(Model?.CustomerEmail))
				{
					<span>@Translate("Email"): @(Model?.CustomerEmail)</span>
				}
				@if (!string.IsNullOrEmpty(Model?.CustomerPhone))
				{
					<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-3 gap-4 fs-7 mb-3">
					@if (Model?.TryGetOrderState(out var orderState) is true)
					{
						<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?.CompletedDate != null)
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("Payment date")</div>
							<div>@(Model?.CompletedDate?.ToString(Pageview?.Area?.CultureInfo.DateTimeFormat.ShortDatePattern))</div>
						</div>
					}
					@if (!string.IsNullOrEmpty(Model?.PaymentMethod?.Name))
					{
						<div>
							<small class="text-muted">@Translate("Payment method")</small> 
							<div>@(Model?.PaymentMethod?.Name)</div>
						</div>
					}
				</div>
				<div class="grid grid-1 grid-lg-3 gap-4 fs-7">
					@if (!string.IsNullOrEmpty(Model?.TransactionCardnumber))
					{
						<div>
							<small class="text-muted">@Translate("Card/Account number")</small>
							<div>@(Model?.TransactionCardnumber)</div>
						</div>
					}
					@if (!string.IsNullOrEmpty(Model?.PurchaseOrderNumber))
					{
						<div>
							<div class="small mb-1 text-muted">@Translate("PO number")</div>
							<div>@(Model?.PurchaseOrderNumber)</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("Invoice number")</th>
							<th class="text-end">@Translate("Amount paid")</th>
						</tr>
					</thead>
					<tbody>
						@if (orderlines?.Count() > 0)
						{
							foreach (var orderline in orderlines.Reverse())
							{
								<tr>
									<td><span>@(!string.IsNullOrEmpty(orderline?.Reference) ? orderline?.Reference : orderline?.ProductName)</span></td>
									<td class="text-end">
										<div class="vstack align-self-auto text-end">
											@if(orderline?.HasProductDiscount() is true)
											{
												<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="2" 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 class="text-end fw-semibold">@Translate("Total amount paid")</td>
							<td class="text-end"><span class="text-price dw-h6">@(Model?.Price?.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>