<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Invoice <%= order.order_uid %></title>
    <style>
        @page { margin: 10px; }
        body { margin: 10px; }
        .invoice-box { max-width: 100%; margin: auto; font-size: 16px; line-height: 24px; font-family: 'Helvetica Neue', 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.heading td { background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; }
        .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; }
        .footer { left: 0; bottom: 0; width: 100%; text-align: center; font-size: 8px; font-weight: bold; }
    </style>
</head>
<body>
    <% if (order) { %>
    <div class="invoice-box" id="invoice">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="https://developer-beta.com/p6/jan_fitness/uploads/site/logo/logo-1726057244.png" style="width:auto;height:90px;margin-bottom:10px;"></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.order_uid %></span></td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0">
            <tr class="heading">
                <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>
            <% order.products.forEach(function(item, index) { %>
            <tr class="item">
                <td><%= index + 1 %></td>
                <td><%= item.name %></td>
                <td style="text-align:center;"><%= item.quantity %></td>
                <td style="text-align:right;">€<%= item.price %></td>
                <td style="text-align:right;">€<%= +item.quantity*+item.price %></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;">€<%= order.total %></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;">-€<%=order.coupon_discount %></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;">€<%=order.shipping_charge%></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;">€<%=order.grand_total%></td>
            </tr>	
        </table>
    </div>
    <% } %>
</body>
</html>
