Default Invoice Template - 1(Document)
Header
<div style="margin:30px; padding-top: 50px">
<table align="left" border="0" style="width: 100%;">
<tbody>
<tr>
<td style="width: 323px;" valign="top">
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 323px;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; height: 80px; background-color: rgb(0, 191, 165); width: 313px;">
<h1>
<strong>INVOICE</strong>
</h1>
</td>
</tr>
</tbody>
</table>
<pre>
</pre>
<table border="0" cellpadding="1" cellspacing="1" style="width: 319px;">
<tbody>
<tr>
<td style="width: 143px;">
<strong>Invoice date:</strong><br/>
{{ invoice.date|date("jS F Y") }}</td>
<td style="width: 161px;">
<strong>Invoice number:</strong><br/>
#{{ invoice.number }}</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="1" cellspacing="1" style="width: 319px;">
<tbody>
<tr>
<td style="width: 145px;">
<strong>Customer name:</strong><br/>
{{ invoice.clientContact.name }}</td>
<td style="width: 159px;">
<strong>Animal name:</strong><br/>
{{ invoice.animal.name }}</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 359px;" valign="bottom">
<div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}"/></div>
<p><br/>
</p>
</td>
</tr>
</tbody>
</table>
</div>Body
<div style="margin: 30px;">
<style>
table#invoice_table tbody tr:nth-child(odd) {
background-color: #F5F5F5;
}
</style>
<table id="invoice_table" style="width: 1041px; font-size: 15px;">
<thead>
<tr>
<td style=" text-align: left; float: left; width: 205px; height: 40px; color:#000000;">
<span style="font-size:14px;">
<b>Description</b>
</span>
</td>
<td style="text-align: left; float: left; width: 144px; color: rgb(0, 0, 0);">
<span style="font-size:14px;">
<b>Staff Member</b>
</span>
</td>
<td style="text-align: left; float: left; width: 66px; color: rgb(0, 0, 0);">
<span style="font-size:14px;">
<b>Qty</b>
</span>
</td>
{% if invoice.hasDiscounts %}
<td style="text-align: left; float: left; width: 81px; color: rgb(0, 0, 0);">
<span style="font-size:14px;">
<b>Price</b>
</span>
</td>
<td style="text-align: left; float: left; width: 79px; color: rgb(0, 0, 0);">
<span style="font-size:14px;">
<b>Discount</b>
</span>
</td>
<td style="text-align: left; float: left; width: 79px; color: rgb(0, 0, 0);">
<span style="font-size:14px;">
<b>Discount (%)</b>
</span>
</td>
{% endif %}
<td style="text-align: right; float: left; width: 139px; color: rgb(0, 0, 0); padding-right: 10px;">
<span style="font-size:14px;">
<b>Total</b>
</span>
</td>
</tr>
</thead>
<tbody>
{% for invoiceline in invoice.lineItems %}
{% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %}
<tr>
<td>{{ invoiceline.product.name }}</td>
<td>{{ invoiceline.salesPerson.name }}</td>
<td>{{ invoiceline.quantity }}</td>
{% if invoice.hasDiscounts %}
<td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if invoiceline.totalDiscount(true) > 0 %}
<td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
<td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td></td>
<td></td>
{% endif %}
{% endif %}
<td style=" text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td>
</tr>
{% if invoiceline.printContained %}
{% for subinvoiceline in invoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.quantity }}</td>
{% if invoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if invoiceline.printContainedPrices %}
{{ subinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% if subinvoiceline.isHeaderline %}
{% if subinvoiceline.printContained %}
{% for subsubinvoiceline in subinvoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subsubinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.quantity }}</td>
{% if subinvoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subsubinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if subinvoiceline.printContainedPrices %}
{{ subsubinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% if subinvoiceline.isHeaderline %}
{% if subsubinvoiceline.printContained %}
{% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subsubsubinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.quantity }}</td>
{% if subsubinvoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subsubsubinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if subsubinvoiceline.printContainedPrices %}
{{ subsubsubinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% elseif not invoiceline.hasHeaderLine %}
<tr>
<td>{{ invoiceline.product.name }}</td>
<td>{{ invoiceline.salesPerson.name }}</td>
<td>{{ invoiceline.quantity }}</td>
{% if invoice.hasDiscounts %}
<td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if invoiceline.totalDiscount(true) > 0 %}
<td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
<td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td></td>
<td></td>
{% endif %}
{% endif %}
<td style="text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<table cellpadding="5" cellspacing="5" style="margin-left: auto; width: 200px;">
<tbody>
<tr>
<td style="width: 105px; padding: 30px 5px 5px 15px;">Subtotal:</td>
<td style="width: 68px; text-align: right; padding: 30px 15px 5px 5px;">
<strong>{{ invoice.subTotal|moneyformat }}</strong>
</td>
</tr>
{% if invoice.includesTax %}
<tr>
<td style="width: 105px; padding-left: 15px;">Including tax:</td>
<td style="width: 68px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.total|moneyformat }}</strong>
</td>
</tr>
{% endif %}
{% if invoice.hasDiscounts %}
<tr>
<td style="width: 105px; padding-left: 15px;">Discount:</td>
<td style="width: 68px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong>
</td>
</tr>
{% endif %}
<tr>
<td style="width: 105px; padding-left: 15px;">Total:</td>
<td style="width: 68px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.total|moneyformat }}</strong>
</td>
</tr>
{% if invoice.paymentMethods %}
<tr>
<td style="width: 105px; padding-left: 15px;">Payment method:</td>
<td style="width: 68px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.paymentMethods }}</strong>
</td>
</tr>
{% endif %}
<tr>
<td style="width: 105px; padding-left: 15px;">Amount paid:</td>
<td style="width: 68px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.paid|moneyformat }}</strong>
</td>
</tr>
<tr>
<td style="width: 105px; padding-left: 15px; padding-bottom: 30px;">Balance:</td>
<td style="width: 68px; text-align: right; padding-right: 15px; padding-bottom: 30px;">
<strong>{{ invoice.due|moneyformat }}</strong>
</td>
</tr>
</tbody>
</table>
</div>