<div style="margin:30px 30px 0px 30px; padding-top: 50px;">
    <div class="header" style=" border-bottom: thin solid #e0e0e0;">
        <table style="margin-bottom:1rem; width:100%">
            <tbody>
            <tr>
                <td style="width:60%">
                    <table>
                        <tbody>
                        <tr>
                            <td style="background-color:#00bfa5; font-size:1.7rem; font-weight:bold; padding:1rem">PAYMENT RECEIPT</td>
                        </tr>
                        </tbody>
                    </table>

                    <table style="margin-top:1rem; width:100%">
                        <tbody>
                        <tr>
                            <td><strong>Receipt date:</strong></td>
                            <td><strong>Receipt number:</strong></td>
                            <td><strong>Customer number:</strong></td>
                        </tr>
                        <tr>
                            <td>{{ payment.date|dateformat }}</td>
                            <td>#{{ payment.number }}</td>
                            <td>{{ payment.clientContact.code }}</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
                <td style="text-align:right; width:30%"><img alt="43" src="{{ templatesettings.logoLocation }}" style="width:30%" /></td>
            </tr>
            </tbody>
        </table>

        <table style="margin-left:5px; width:100%">
            <tbody>
            <tr>
                <td><strong>Customer name:</strong></td>
                <td>&nbsp; &nbsp;<strong>Payment amount:</strong></td>
                <td>&nbsp; &nbsp;<strong>Payment method:</strong></td>
                <td><strong>Account balance:</strong></td>
            </tr>
            <tr>
                <td>{{ payment.clientContact.name}}</td>
                <td>&nbsp; &nbsp;{{ payment.amount|moneyformat }}&nbsp;</td>
                <td>&nbsp; &nbsp;{{ payment.paymentMethod }}&nbsp;</td>
                <td>{{ payment.clientContact.balanceAt|moneyformat }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    td.subline {
        color: #555555;
        font-style: italic;
    }
</style>
<div class="content" style="margin: 24px;">
    {% 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></td>
                        <td><strong>Record paid:</strong></td>
                    </tr>
                    <tr>
                        <td>{{ financialAllocation.date|dateformat }}</td>
                        <td>{{ invoice.number }}</td>
                    </tr>
                    </tbody>
                </table>

                <table class=""
                       style="width:100%; border-style: solid; border-color: #e0e0e0; border-top:0; border-left:0; border-right:0; border-bottom:1px; padding-bottom:1rem;">
                    <tbody>
                    <tr style="border-style: solid; border-color: #e0e0e0; border-bottom: 1px; border-top:0; border-left:0; border-right:0; padding-bottom:1rem; font-size: 80%;">
                        <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="" style="width:100%; padding-bottom:1rem; line-height:2;">
            <tbody>
            <tr style="border-style: solid; border-color: #e0e0e0; border-top:0; border-left:0; border-right:0; border-bottom:1px; padding-bottom:1rem;">
                <th style="text-align: left; padding: 4px;"><strong>Date</strong></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 %}
    {% 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 %}
</div>

<div style="margin:0 40px; padding: 20px 40px 60px 20px;">
    <h1>
        <span style="color:#00bfa5;">
            <strong>THANK YOU</strong>
        </span>
    </h1>
    <div style="border-top: 5px solid rgb(0, 191, 165);"><br/>
        {{ business.postalAddress.addressText(false, true) }}&nbsp;&bull;
        {{ business.phoneNumber }}&nbsp;&bull;
        {{ business.businessEmail }}</div>
</div>