<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" encoding="UTF-8" indent="yes"/>
	<xsl:template match="/">
		<html>
		<head>
			<title>Order Confirmation</title>
			<style>
				body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 16px; color: #1a1a1a; background: #fff; font-size: 14px; }
				.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 0; }
				.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
				.box { border: 1px solid #ccc; border-radius: 4px; padding: 6px 10px; }
				h1 { font-size: 18px; margin: 0 0 8px 0; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 6px; }
				h2 { font-size: 13px; margin: 0 0 3px 0; color: #3498db; text-transform: uppercase; letter-spacing: 0.5px; }
				table { border-collapse: collapse; width: 100%; }
				td { padding: 2px 6px; vertical-align: top; }
				.lbl { color: #888; white-space: nowrap; width: 1%; }
				.val { color: #1a1a1a; }
				.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
				.ext { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 20px; }
				.ext-item { white-space: nowrap; }
				.ext-item .lbl { font-size: 14px; }
				.ext-item .val { font-weight: 600; }
				.lines { width: 100%; border-collapse: collapse; margin: 8px 0; }
				.lines th { background: #2c3e50; color: #fff; padding: 6px 8px; font-size: 13px; text-align: left; white-space: nowrap; }
				.lines td { padding: 5px 8px; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
				.lines tr:nth-child(even) td { background: #f8f9fa; }
				.r { text-align: right; }
				.foot { border-top: 2px solid #2c3e50; margin-top: 8px; padding-top: 6px; }
				.foot td { padding: 4px 8px; }
				.foot .total { font-weight: bold; font-size: 15px; background: #eaf2f8; }
				.dim { color: #999; font-size: 13px; }
				.ctl { font-size: 13px; color: #666; }
				.sep { border-top: 1px solid #eee; }
				.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 13px; font-weight: 600; }
				.badge-new { background: #d4edda; color: #155724; }
				.badge-update { background: #fff3cd; color: #856404; }
				.badge-accept { background: #d4edda; color: #155724; }
				.badge-reject { background: #f8d7da; color: #721c24; }
				.badge-backordered { background: #fff3cd; color: #856404; }
				pre { margin: 4px 0; font-size: 14px; white-space: pre-wrap; }
			</style>
		</head>
		<body>
		<xsl:for-each select="cXML">
			<h1>Order Confirmation <xsl:value-of select="Request/ConfirmationRequest/OrderReference/@orderID"/>
				<span class="dim"> (<xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@type"/>, <xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@operation"/>)</span>
			</h1>

			<div class="grid3">
				<div class="box">
					<h2>Confirmation</h2>
					<div class="g2">
						<span class="ext-item"><span class="lbl">Notice date:</span>&#160;<span class="val"><xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@noticeDate"/></span></span>
						<span class="ext-item"><span class="lbl">Type:</span>&#160;<span class="val"><xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@type"/></span></span>
						<span class="ext-item"><span class="lbl">Operation:</span>&#160;<span class="val">
							<xsl:choose>
								<xsl:when test="Request/ConfirmationRequest/ConfirmationHeader/@operation='new'"><span class="badge badge-new">NEW</span></xsl:when>
								<xsl:when test="Request/ConfirmationRequest/ConfirmationHeader/@operation='update'"><span class="badge badge-update">UPDATE</span></xsl:when>
								<xsl:otherwise><xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@operation"/></xsl:otherwise>
							</xsl:choose>
						</span></span>
						<span class="ext-item"><span class="lbl">Confirm ID:</span>&#160;<span class="val"><xsl:value-of select="Request/ConfirmationRequest/ConfirmationHeader/@confirmID"/></span></span>
						<span class="ext-item"><span class="lbl">Mode:</span>&#160;<span class="val"><xsl:value-of select="Request/@deploymentMode"/></span></span>
					</div>
				</div>
				<div class="box">
					<h2>Order Reference</h2>
					<div class="g2">
						<span class="ext-item"><span class="lbl">Order ID:</span>&#160;<span class="val"><xsl:value-of select="Request/ConfirmationRequest/OrderReference/@orderID"/></span></span>
						<span class="ext-item"><span class="lbl">Payload ID:</span>&#160;<span class="val"><xsl:value-of select="Request/ConfirmationRequest/OrderReference/DocumentReference/@payloadID"/></span></span>
					</div>
					<xsl:if test="Request/ConfirmationRequest/ConfirmationHeader/IdReference">
						<div class="g2">
							<xsl:for-each select="Request/ConfirmationRequest/ConfirmationHeader/IdReference">
								<span class="ext-item"><span class="lbl"><xsl:call-template name="domainLabel"><xsl:with-param name="name" select="@domain"/></xsl:call-template>:</span>&#160;<span class="val"><xsl:value-of select="@identifier"/></span></span>
							</xsl:for-each>
						</div>
					</xsl:if>
				</div>
				<div class="box">
					<h2>Network</h2>
					<div class="g2">
						<span class="ext-item"><span class="lbl">From:</span>&#160;<span class="val"><xsl:value-of select="Header/From/Credential/Identity"/></span></span>
						<span class="ext-item"><span class="lbl">To:</span>&#160;<span class="val"><xsl:value-of select="Header/To/Credential/Identity"/></span></span>
						<span class="ext-item"><span class="lbl">Sender:</span>&#160;<span class="val"><xsl:value-of select="Header/Sender/Credential/Identity"/></span></span>
						<span class="ext-item"><span class="lbl">User Agent:</span>&#160;<span class="val"><xsl:value-of select="Header/Sender/UserAgent"/></span></span>
					</div>
				</div>
			</div>

			<table class="lines">
				<tr>
					<th>Line</th>
					<th>Status</th>
					<th class="r">Qty</th>
					<th>Unit</th>
					<th>Delivery</th>
					<th>Part</th>
					<th>Buyer Part</th>
					<th>Description</th>
					<th class="r">Unit Price</th>
					<th class="r">Line Total</th>
					<th>Commodity</th>
				</tr>
				<xsl:for-each select="Request/ConfirmationRequest/ConfirmationItem">
					<xsl:variable name="lineNum" select="@lineNumber"/>
					<xsl:for-each select="ConfirmationStatus">
						<tr>
							<td><xsl:value-of select="$lineNum"/></td>
							<td>
								<xsl:choose>
									<xsl:when test="@type='accept'"><span class="badge badge-accept">ACCEPT</span></xsl:when>
									<xsl:when test="@type='reject'"><span class="badge badge-reject">REJECT</span></xsl:when>
									<xsl:when test="@type='backordered'"><span class="badge badge-backordered">BACKORDER</span></xsl:when>
									<xsl:otherwise><xsl:value-of select="@type"/></xsl:otherwise>
								</xsl:choose>
							</td>
							<td class="r"><xsl:value-of select="@quantity"/></td>
							<td><xsl:value-of select="UnitOfMeasure"/></td>
							<td style="white-space:nowrap"><xsl:value-of select="substring(@deliveryDate, 1, 10)"/></td>
							<td><xsl:value-of select="ItemIn/ItemID/SupplierPartID"/></td>
							<td><xsl:value-of select="ItemIn/ItemID/BuyerPartID"/></td>
							<td><xsl:value-of select="ItemIn/ItemDetail/Description"/></td>
							<td class="r"><xsl:value-of select="ItemIn/ItemDetail/UnitPrice/Money"/></td>
							<td class="r"><xsl:value-of select="format-number(@quantity * ItemIn/ItemDetail/UnitPrice/Money, '#.00')"/></td>
							<td><xsl:value-of select="ItemIn/ItemDetail/Classification[@domain='ERPCommodityCode']"/>&#160;<span class="dim"><xsl:value-of select="ItemIn/ItemDetail/Classification[@domain='ERPCommodityCodeDescription']"/></span></td>
						</tr>
					</xsl:for-each>
				</xsl:for-each>
			</table>

			<div class="foot">
				<table style="width:auto; float:right">
					<tr>
						<td class="lbl">Total</td>
						<td class="r total">
							<xsl:call-template name="calcTotal">
								<xsl:with-param name="statuses" select="Request/ConfirmationRequest/ConfirmationItem/ConfirmationStatus"/>
								<xsl:with-param name="pos" select="1"/>
								<xsl:with-param name="runningSum" select="0"/>
							</xsl:call-template>
						</td>
					</tr>
				</table>
				<div style="clear:both"/>
				<span class="dim">
					Payload: <xsl:value-of select="@payloadID"/>
					&#160;&#160;|&#160;&#160; <xsl:value-of select="@timestamp"/>
				</span>
			</div>
		</xsl:for-each>
		</body>
		</html>
	</xsl:template>

	<xsl:template name="calcTotal">
		<xsl:param name="statuses"/>
		<xsl:param name="pos"/>
		<xsl:param name="runningSum"/>
		<xsl:variable name="s" select="$statuses[position()=$pos]"/>
		<xsl:choose>
			<xsl:when test="$s">
				<xsl:call-template name="calcTotal">
					<xsl:with-param name="statuses" select="$statuses"/>
					<xsl:with-param name="pos" select="$pos + 1"/>
					<xsl:with-param name="runningSum" select="$runningSum + ($s/@quantity * $s/ItemIn/ItemDetail/UnitPrice/Money)"/>
				</xsl:call-template>
			</xsl:when>
			<xsl:otherwise>
				<xsl:value-of select="format-number($runningSum, '#.00')"/>&#160;<xsl:value-of select="$statuses[1]/ItemIn/ItemDetail/UnitPrice/Money/@currency"/>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>

	<xsl:template name="domainLabel">
		<xsl:param name="name"/>
		<xsl:choose>
			<xsl:when test="$name='buyerLocationID'">Buyer Location</xsl:when>
			<xsl:when test="$name='stockLocationID'">Storage Location</xsl:when>
			<xsl:when test="$name='storageLocationID'">Storage Location</xsl:when>
			<xsl:when test="$name='buyerAccountID'">Buyer Account</xsl:when>
			<xsl:when test="$name='buyerID'">Buyer ID</xsl:when>
			<xsl:when test="$name='PurchasingOrganization'">Purchasing Org.</xsl:when>
			<xsl:when test="$name='PurchasingGroup'">Purchasing Group</xsl:when>
			<xsl:when test="$name='BuyerPlannerCode'">Planner</xsl:when>
			<xsl:when test="$name='supplierReference'">Supplier Ref.</xsl:when>
			<xsl:otherwise><xsl:value-of select="$name"/></xsl:otherwise>
		</xsl:choose>
	</xsl:template>
</xsl:stylesheet>
