@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Ecommerce.Orders
@using Dynamicweb.Ecommerce.ProductCatalog

@{
	var order = Dynamicweb.Ecommerce.Services.Orders.GetById(GetString("Ecom:Order.ID")) ?? null;
	var invoice = order?.TryGetOrderViewModel(out var orderViewModel) is true ? orderViewModel : null;
	var outstandingInvoicesPageId = GetPageIdByNavigationTag("OutstandingInvoices");
	var backLink = outstandingInvoicesPageId is not 0 ? SearchEngineFriendlyURLs.GetFriendlyUrl(outstandingInvoicesPageId) : null;
}

<style>
	@@media print {
		.print-no-break-inside {
			break-inside: avoid;
			page-break-inside: avoid;
		}

		.card {
			padding: 0 !important;
			box-shadow: none;
		}
	}
</style>

<div class="w-100 mx-auto d-grid" style="max-inline-size: 48rem;">
	@if (outstandingInvoicesPageId is not 0)
	{
		<nav class="mb-4 d-print-none">
			<a href="@(backLink)" class="btn btn-outline-secondary border-0 hstack gap-2 px-3 d-inline-flex text-body" data-dw-button aria-label="@Translate("Back")">
				<span class="icon-2">
					@ReadFile("/Files/Images/Icons/arrow-left.svg")
				</span>
				<span>@Translate("Back")</span>
			</a>
		</nav>
	}

	<div class="card mb-4 bg-success border-success bg-opacity-10 border-opacity-25 d-print-none">
		<div class="card-body text-center text-success">
			<div class="icon-6 mb-3" aria-hidden="true" title="@Translate("Payment successful")">
				@ReadFile("/Files/Images/Icons/circle-check.svg")
			</div>
			<h2 class="h4 mb-2 text-success">@Translate("Payment successful")</h2>
			<p class="mb-0">@Translate("Your payment has been processed successfully.")</p>
		</div>
	</div>

	<div class="card mb-4">
		<div class="card-body">
			<h1 class="h4">@(Translate("Payment receipt"))</h1>
			<p class="mb-4 fs-7 d-print-none">@(Translate("We've sent an email to")) @(invoice?.CustomerEmail) @(Translate("with your confirmation and receipt. If the email has not arrived within two minutes, please check your spam folder to see if the email was routed there."))</p>
			<hr class="my-4" style="opacity: .15;">
			<div class="grid grid-1 grid-sm-3 gap-3 fs-7 mb-4">
				<div class="vstack">
					<div class="mb-1 text-muted">@Translate("Payment date")</div>
					<div class="fw-bold">@(invoice?.CompletedDate?.ToString(Pageview?.Area?.CultureInfo.DateTimeFormat.ShortDatePattern))</div>
				</div>
				@if (!string.IsNullOrEmpty(invoice?.PaymentMethod?.Name))
				{
					<div class="vstack">
						<div class="mb-1 text-muted">@Translate("Payment method")</div>
						<div class="fw-bold">@invoice?.PaymentMethod?.Name</div>
					</div>
				}
				@if (!string.IsNullOrEmpty(invoice?.TransactionCardnumber))
				{
					var cardNumber = invoice?.TransactionCardnumber;
					var lastFour = cardNumber?.Length >= 4 ? cardNumber?.Substring(cardNumber?.Length - 4 ?? 0) : cardNumber;
					<div class="vstack">
						<div class="mb-1 text-muted">@Translate("Card/Account number")</div>
						<div class="fw-bold">•••• •••• •••• @lastFour</div>
					</div>
				}
				@if (!string.IsNullOrEmpty(invoice?.Id))
				{
					<div class="vstack">
						<div class="mb-1 text-muted">@Translate("Payment number")</div>
						<div class="fw-bold">@invoice?.Id</div>
					</div>
				}
				@if (!string.IsNullOrEmpty(invoice?.PurchaseOrderNumber))
				{
					<div class="vstack">
						<div class="mb-1 text-muted">@Translate("PO number")</div>
						<div class="fw-bold">@invoice?.PurchaseOrderNumber</div>
					</div>
				}
			</div>
			<div class="grid grid-1 grid-lg-2 gap-3 fs-7 mb-4">
				<div class="vstack">
					<div class="mb-2 text-muted">@Translate("Billing address")</div>
					<div class="fw-bold">@(invoice?.CustomerCompany)</div>
					<div>@(invoice?.CustomerName)</div>
					<div>@(invoice?.CustomerAddress)</div>
					<div>@(invoice?.CustomerAddress2)</div>
					<div>@(invoice?.CustomerZip) @(invoice?.CustomerRegion) @(invoice?.CustomerCity)</div>
					<div>@(invoice?.CustomerCountry)</div>
				</div>
			</div>

			@if (invoice?.OrderLines?.Count() > 0)
			{
				var ledger = invoice.GetLedger();

				<h2 class="h5">@(Translate("Invoices paid"))</h2>

				<div class="card overflow-hidden print-no-break-inside">
					<div class="table-responsive">
						<table class="table table-md fs-7 mb-0" style="--bs-table-color: var(--bs-body-color);">
							<thead style="--bs-table-bg: rgba(var(--bs-body-color-rgb), .0275); --bs-table-color: rgba(var(--bs-body-color-rgb), 0.5);">
								<tr>
									<th>@Translate("Invoice number")</th>
									<th class="text-end">@Translate("Amount paid")</th>
								</tr>
							</thead>
							<tbody>
								@foreach (var payment in invoice.OrderLines)
								{
									string productNumber = !string.IsNullOrEmpty(payment.Reference) ? payment.Reference : payment.ProductName;

									<tr>
										<td>@productNumber</td>
										<td class="text-end text-price">@payment.Price.PriceWithoutVatFormatted</td>
									</tr>
								}
							</tbody>
						</table>
					</div>
				</div>

				<div class="hstack justify-content-between mt-4 p-3 rounded print-no-break-inside" style="background-color: rgba(var(--bs-body-color-rgb), .0275);">
					<h6 class="m-0">@(Translate("Total amount paid"))</h6>
					<h5 class="m-0 text-price">@(invoice?.Price?.PriceWithoutVatFormatted)</h5>
				</div>
			}

			@if (!string.IsNullOrEmpty(invoice?.CustomerComment))
			{
				<hr class="my-4" style="opacity: .15;">

				<div class="vstack fs-7">
					<div class="mb-1 text-muted">@Translate("Comment")</div>
					<div>@(invoice?.CustomerComment)</div>
				</div>
			}
		</div>

	</div>

	<div class="d-flex justify-content-center d-print-none">
		<button type="button" class="btn btn-outline-secondary text-body hstack gap-2" data-dw-button onclick='window.print()'>
			<span class="icon-2">
				@ReadFile("/Files/Images/Icons/print.svg")
			</span>
			@Translate("Print invoice")
		</button>
	</div>

</div>

<script>
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({
		event: "purchase",
		ecommerce: {
			transaction_id: "@GetString("Ecom:Order.ID")",
			value: @GetDouble("Ecom:Order.Price.Price.Value").ToString("0.00", System.Globalization.CultureInfo.InvariantCulture),
			tax: @GetDouble("Ecom:Order.Taxes.Total.Price.Value").ToString("0.00", System.Globalization.CultureInfo.InvariantCulture),
			shipping: @GetDouble("Ecom:Order.ShippingFee.Price.Value").ToString("0.00", System.Globalization.CultureInfo.InvariantCulture),
			currency: "@GetString("Ecom:Order.Price.Currency.Code")",
			items: [
				@foreach (LoopItem orderline in GetLoop("OrderLines"))
				{
					<text>
					{
						item_id: "@orderline.GetString("Ecom:Order:OrderLine.ProductID")",
						item_name: "@Dynamicweb.Core.Encoders.HtmlEncoder.JavaScriptStringEncode(orderline.GetString("Ecom:Order:OrderLine.ProductName"))",
						currency: "@orderline.GetString("Ecom:Order:OrderLine.UnitPrice.CurrencyCode")",
						price: @orderline.GetDouble("Ecom:Order:OrderLine.UnitPriceWithProductDiscount.Price.Value").ToString("0.00", System.Globalization.CultureInfo.InvariantCulture),
						discount: @Math.Abs(orderline.GetDouble("Ecom:Order:OrderLine.UnitDiscount.Price.Value")).ToString("0.00", System.Globalization.CultureInfo.InvariantCulture),
						quantity: @orderline.GetDouble("Ecom:Order:OrderLine.Quantity").ToString("0.00", System.Globalization.CultureInfo.InvariantCulture)
					},
					</text>
				}
			]
		}
	});
</script>
