<style type="text/css">.paymenttable th,
    .paymenttable td {
        padding: 5px font-size: 14px
    }
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="paymenttable" style="width:100%">
    <tbody class="header">
    <tr style="background-color:#00bfa5">
        <td colspan="2" style="height:80px; width:482px"></td>
        <td style="height:80px; width:210px"></td>
        <td style="height:80px; width:58px"></td>
    </tr>
    <tr style="background-color:#00bfa5">
        <td colspan="2" style="height:20px; width:482px"></td>
        <td colspan="1" rowspan="2" style="background-color:#ffffff; height:20px; overflow:visible; width:210px"><img alt="" src="{{ templatesettings.logoLocation }}" /></td>
        <td style="height:20px; width:58px"></td>
    </tr>
    <tr>
        <td rowspan="2" style="width:29px"></td>
        <td rowspan="2" style="width:501px"><span style="font-size:32px"><strong>PAYMENT RECEIPT</strong> </span><br />
            <span style="font-size:24px">#{{ payment.number }}</span>
            <table style="margin-top:1rem; width:100%">
                <tbody>
                <tr>
                    <td style="padding-bottom:1px; padding-top:1px"><strong>Receipt date:</strong></td>
                    <td style="padding-bottom:1px; padding-top:1px"><strong>Receipt number:</strong></td>
                    <td style="padding-bottom:1px; padding-top:1px"><strong>Customer number:</strong></td>
                </tr>
                <tr>
                    <td style="padding-bottom:1px; padding-top:1px">{{ payment.date|dateformat }}</td>
                    <td style="padding-bottom:1px; padding-top:1px">#{{ payment.number }}</td>
                    <td style="padding-bottom:1px; padding-top:1px">{{ payment.clientContact.code }}</td>
                </tr>
                </tbody>
            </table>
            &nbsp;</td>
        <td style="width:58px"></td>
    </tr>
    <tr>
        <td style="width:210px"></td>
        <td style="width:58px"></td>
    </tr>
    </tbody>
</table>

<div style="margin:-8px 20px 0px 20px;">
    <table style="margin-bottom:1rem; margin-left:5px; width:100%">
        <tbody>
        <tr>
            <td style="padding-bottom:1px; padding-top:1px"><strong>Payment amount:</strong></td>
            <td style="padding-bottom:1px; padding-top:1px"><strong>Payment method:</strong></td>
            <td style="padding-bottom:1px; padding-top:1px"><strong>Account balance:</strong></td>
        </tr>
        <tr>
            <td style="padding-bottom:1px; padding-top:1px">{{ payment.amount|moneyformat }}&nbsp;</td>
            <td style="padding-bottom:1px; padding-top:1px">{{ payment.paymentMethod }}&nbsp;</td>
            <td style="padding-bottom:1px; padding-top:1px">{{ payment.clientContact.balanceAt|moneyformat }}</td>
        </tr>
        </tbody>
    </table>
</div>

<style type="text/css">body{
        font-family: sans-serif;
    }
    table {
        border-collapse: collapse;
    }
    .header-table tr,td, th {
        padding: 8px 2px;
        line-height:1.5;
    }
    .data-table td,th {
        border-bottom: 1px solid #cfd8dc;
        border-collapse: collapse;
        padding: 8px 2px;
    }
    .footer-table tr,td{
        padding:2px 4px;
    }
    .data-table td.subline {
        color: #555555;
        font-style: italic;
    }
</style>

<div class="content" style="padding: 1rem 8px 0 8px;">{% if financialsettings.showInvoiceItemOnPaymentReceipt %}{% for financialAllocation in financialAllocations %}{% if financialAllocation.invoice %}{% set invoice = financialAllocation.invoice %}
        <table style="line-height:1; width:100%">
            <tbody>
            <tr>
                <td><strong>Date:</strong> {{ financialAllocation.date|dateformat }}</td>
                <td><strong>Record paid:</strong> {{ invoice.number }}</td>
            </tr>
            </tbody>
        </table>

        <table class="data-table" style="width:100%">
            <tbody>
            <tr>
                <th style="width:80%; text-align: left;">Description</th>
                <th style="text-align: left;">Qty</th>
                <th style="text-align: right;">Total</th>
            </tr>
            {% for invoiceexpense in invoice.lineItems %}{% if invoiceexpense.isHeaderLine and not invoiceexpense.hasHeaderLine %}
                <tr>
                    <td>{{ invoiceexpense.productName }}</td>
                    <td>{{ invoiceexpense.qty }}</td>
                    <td style="text-align:right">{{ invoiceexpense.total(true)|moneyformat }}</td>
                </tr>
                {% if invoiceexpense.printContained %}{% for subline in invoiceexpense.nestedLines %}
                    <tr>
                        <td class="subline" style="padding-left: 8px;">{{ subline.productName }}</td>
                        <td class="subline">{{ subline.qty }}</td>
                        <td class="subline" style="text-align:right">{% if invoiceexpense.printContainedPrices %}{{ (subline.total(true))|moneyformat }} {% endif %}</td>
                    </tr>
                    {% if subline.isHeaderLine %}{% if subline.PrintContained %}{% for sub2line in subline.nestedLines %}
                        <tr>
                            <td class="subline" style="padding-left: 12px;">{{ sub2line.productName }}</td>
                            <td class="subline">{{ sub2line.qty }}</td>
                            <td class="subline" style="text-align:right">{% if subline.printContainedPrices %}{{ (sub2line.total(true))|moneyformat }} {% endif %}</td>
                        </tr>
                        {% if sub2line.isHeaderLine %}{% if sub2line.PrintContained %}{% for sub3line in sub2line.nestedLines %}
                            <tr>
                                <td class="subline" style="padding-left: 16px;">{{ sub3line.productName }}</td>
                                <td class="subline">{{ sub3line.qty }}</td>
                                <td class="subline" style="text-align:right">{% if sub2line.printContainedPrices %}{{ (sub3line.total(true))|moneyformat }} {% endif %}</td>
                            </tr>
                        {% endfor %}{% endif %}{% endif %}
                    {% endfor %}{% endif %}{% endif %}
                {% endfor %}{% endif %}{% elseif not invoiceexpense.hasHeaderLine %}
                <tr>
                    <td>{{ invoiceexpense.productName }}</td>
                    <td>{{ invoiceexpense.qty }}</td>
                    <td style="text-align:right">{{ invoiceexpense.total(true)|moneyformat }}</td>
                </tr>
            {% endif %}{% endfor %}
            </tbody>
        </table>
        &nbsp;

        <table style="text-align:right; width:100%">
            <tbody>
            <tr>
                <td>Total: <strong>{{ financialAllocation.amount|moneyformat }}</strong></td>
            </tr>
            <tr>
                <td>Paid: <strong>{{ financialAllocation.allocatedamount|moneyformat }}</strong></td>
            </tr>
            </tbody>
        </table>
    {% endif %}{% endfor %}
    {% else %}
        <table class="data-table" style="width:100%; padding-bottom:1rem; line-height:2;">
            <tbody>
            <tr style="padding-bottom:1rem;">
                <th style="text-align: left; padding: 4px;">Date</th>
                <th style="text-align: left; padding: 4px;">Record Paid</th>
                <th style="text-align: left; padding: 4px;">Total</th>
                <th style="text-align: left; padding: 4px;">Paid</th>
            </tr>

            {% for financialAllocation in financialAllocations %}
                <tr>
                    <td style="text-align: left; padding: 4px; width: 30%;">{{ financialAllocation.date|dateformat }}</td>
                    <td style="text-align: left; padding: 4px; width: 30%;">{{ financialAllocation.invoice.number }}</td>
                    <td style="text-align: left; padding: 4px; width: 25%;">{{ financialAllocation.amount|moneyformat }}</td>
                    <td style="text-align: left; padding: 4px; width: 15%;">{{ financialAllocation.allocatedamount|moneyformat }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>
{% if payment.comments is not empty  %}

    <div style="margin-top:4rem; padding-left: 12px;">
        <div><strong>Payment Comments</strong></div>

        <div>{{ payment.comments }}</div>
    </div>
{% endif %}

<style type="text/css">hr {
        height: 2px;
        border-width: 0;
        color: #fff;
        background-color: #fff;
    }
    .footerAddressContainer tr td {
        padding-right: 35px;
        font-size: 14px;
    }
</style>
<div style="background-color: #00BFA5;
        color:#fff; padding: 20px 40px 60px 20px;">
    <table align="center" border="0" cellpadding="1" cellspacing="1" style="color:#ffffff; width:720px">
        <tbody>
        <tr>
            <td style="color:#ffffff; width:180px"><strong><span style="font-size:28px">THANK YOU</span> </strong></td>
            <td style="width:524px">
                <hr /></td>
        </tr>
        </tbody>
    </table>

    <table align="center" border="0" cellpadding="2" cellspacing="2" style="width:720px">
        <tbody class="footerAddressContainer">
        <tr>
            <td style="color:#ffffff">Address:<br />
                <strong>{{ business.postalAddress.addressText(false, true) }}</strong></td>
            <td style="color:#ffffff">Phone:<br />
                <strong>{{ business.phoneNumber }}</strong></td>
            <td style="color:#ffffff">Email:<br />
                {{ business.businessEmail }}</td>
        </tr>
        </tbody>
    </table>
</div>