<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Invoice <%= order_dtls.order_uid %></title>

		<style>
			@page { margin: 10px; }
			body { margin: 10px; }

			.invoice-box {
				max-width: 100%;
				margin: auto;
/*				padding: 30px;*/
/*				border: 1px solid #eee;*/
/*				box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
				font-size: 16px;
				line-height: 24px;
				font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
				color: #555;
			}

			.invoice-box table {
				width: 100%;
				line-height: inherit;
				text-align: left;
				font-size: 12px;
			}

			.invoice-box table td {
				padding: 5px;
				vertical-align: top;
			}

			/*.invoice-box table tr td:nth-child(2) {
				text-align: right;
			}
*/
			.invoice-box table tr.top table td {
				padding-bottom: 20px;
			}

			.invoice-box table tr.top table td.title {
				font-size: 10px;
				line-height: 45px;
				color: #333;
			}

			.invoice-box table tr.information table td {
				padding-bottom: 40px;
			}

			.invoice-box table tr.heading td {
				background: #eee;
				border-bottom: 1px solid #ddd;
				font-weight: bold;
			}

			.invoice-box table tr.details td {
				padding-bottom: 20px;
			}

			.invoice-box table tr.item td {
				border-bottom: 1px solid #eee;
			}

			.invoice-box table tr.item.last td {
				border-bottom: none;
			}

			.invoice-box table tr.total td:nth-child(2) {
				border-top: 2px solid #eee;
				font-weight: bold;
			}

			@media only screen and (max-width: 600px) {
				.invoice-box table tr.top table td {
					width: 100%;
					display: block;
					text-align: center;
				}

				.invoice-box table tr.information table td {
					width: 100%;
					display: block;
					text-align: center;
				}
			}

			/** RTL **/
			.invoice-box.rtl {
				direction: rtl;
				font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
			}

			.invoice-box.rtl table {
				text-align: right;
			}

			.invoice-box.rtl table tr td:nth-child(2) {
				text-align: left;
			}
			p{
				margin: 2px 0;
			}
			.footer {
/*			  position: fixed;*/
			  left: 0;
			  bottom: 0;
			  width: 100%;			  
			  text-align: center;
			  font-size: 8px;
			  font-weight: bold;
			}
			@media all {
			    .page-break { display: none; }			    
			}

			@media print {
			    .page-break { display: block; page-break-before: always; }			    
			}
			footer {
            position: fixed; 
            bottom: 15px; 
            left: 0px; 
            right: 0px;
            height: 50px; 
            text-align: center;
            line-height: 16px;
        }
		</style>
	</head>

	<body>
	
		<div class="invoice-box" id="invoice">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td>
						<td><img src="http://localhost:4500/images/logo.png" style="width:auto;height: 90px;margin-bottom: 10px;"><span style="font-size: 27px; font-weight: 600; color: #f7941d; position: absolute; top: 50px; left: 110px;"></span></td>
                        </span></td>
					<td style="text-align:right;"><h3 style="font-size: 25px;margin-top: 30px;margin-bottom: 5px;">RECHNUNG</h3><span style="font-weight: bold;font-size: 13px;color: grey;"> <%= order_dtls.order_uid %> </span></td>
				</tr>
			</table>	
			<table cellpadding="0" cellspacing="0">
				<tr>

                    
					<td style="border:1px solid #dedede;padding: 10px;">						
							<strong> <%= order_dtls.name %> </strong><br>	
                            <%= order_dtls.billing_address1 %>
							 <%= order_dtls.billing_city %>,	<%= order_dtls.billing_state %>,	<%= order_dtls.billing_zipcode %> ,
	                      <br>	
						  <%= order_dtls.billing_address2 || '' %>
						  <br>
	                        Email: <%= order_dtls.email %><br>
	                        Kontakt Nr: <%= order_dtls.billing_contact_no %> 			
					</td>
					<td>&nbsp;</td>
					
					<td style="border:1px solid #dedede;padding: 10px;">						
							<table>
								<tr>
									<td>
										<b>Auftragsnummer:</b><br>
										<b>Auftragsdatum:</b><br>
										<b>Gesamt:</b><br>
										<b>Zahlung:</b><br>
									</td>
									<td>
																	 
										<%= order_dtls.order_uid %>

										<br>
										<% if(order_dtls.order_date) { %>
											<%= new Date(order_dtls.order_date).toLocaleString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(',', '') %>
										  <% } else { %>
											N/A
										  <% } %>

									
										<br>
										€<%= order_dtls.total %>
										<br>
										 <%= order_dtls.payment_method %> 
									</td>
								</tr>
							</table>						
					</td>
				</tr>
			</table>
			<br>			
		
			<table cellpadding="0" cellspacing="0">
				<tr class="heading" style="font-size: 12px;">
					<td>Sl. Nein.</td>
					<td>Produkt</td>
					<td style="text-align:center;">Menge</td>
					<td style="text-align:right;">Preis</td>
					<td style="text-align:right;">Gesamt</td>
				</tr>


				<% if (products && products.length > 0) { %>
					<% products.forEach((product, index) => { %>
						<tr class="item" style="font-size: 12px;">
							<td><%= index + 1 %></td>
							<td><%= product.name %></td>
							<td style="text-align:center;"><%= product.quantity %></td>
							<td style="text-align: right;">€<%= parseFloat(product.price).toFixed(2) %></td>
							<td style="text-align: right;">€<%= parseFloat(product.total).toFixed(2) %></td>
						</tr>
					<% }); %>
				<% } %>
				


		
				<tr class="heading" style="font-size: 12px;">
					<td></td>
					<td></td>												
					<td></td>
					<td style="text-align:right;">Zwischensumme</td>
					<td style="text-align:right;">€<%= parseFloat(order_dtls.total).toFixed(2) || '0.00' %>
						</td>
				</tr>
				<tr style="font-size: 12px;">
					<td></td>
					<td></td>												
					<td></td>
					<td style="text-align:right;">Rabatt</td>
					<td style="text-align:right;">-€<%= parseFloat(order_dtls.coupon_discount).toFixed(2) || '0.00' %>
						
			</td>
				</tr>
				<tr style="font-size: 12px;">
					<td></td>
					<td></td>												
					<td></td>
					<td style="text-align:right;">Zustellgebühr</td>
					<td style="text-align:right;">€<%= parseFloat(order_dtls.shipping_charge).toFixed(2) %></td>
				</tr>  			
				<tr class="heading" style="font-size: 12px;">
					<td></td>
					<td></td>												
					<td></td>
					<td style="text-align:right;">Gesamtmenge</td>
					<td style="text-align:right;">€<%= parseFloat(order_dtls.grand_total).toFixed(2) %></td>
				</tr>				
		
				
			</table>
		</div>		
	
		<div id="page-break"></div>
	</body>
</html>
