<div style="margin: 10px 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: rgb(0, 191, 165); 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 style="padding: 0px 8px;"><strong>Receipt date:</strong></td>
                            <td style="padding: 0px 8px;"><strong>Receipt number:</strong></td>
                            <td style="padding: 0px 8px;"><strong>Customer number:</strong></td>
                        </tr>
                        <tr>
                            <td style="padding: 0px 8px;">{{ payment.date|dateformat }}</td>
                            <td style="padding: 0px 8px;">#{{ payment.number }}</td>
                            <td style="padding: 0px 8px;">{{ 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-bottom:1rem; margin-left:5px; width:100%">
            <tbody>
            <tr>
                <td style="padding: 0px 8px;"><strong>Customer name:</strong></td>
                <td style="padding: 0px 8px;">&nbsp; &nbsp;<strong>Payment amount:</strong></td>
                <td style="padding: 0px 8px;">&nbsp; &nbsp;<strong>Payment method:</strong></td>
                <td style="padding: 0px 8px;"><strong>Account balance:</strong></td>
            </tr>
            <tr>
                <td style="padding: 0px 8px;">{{ payment.clientContact.name}}</td>
                <td style="padding: 0px 8px;">&nbsp; &nbsp;{{ payment.amount|moneyformat }}&nbsp;</td>
                <td style="padding: 0px 8px;">&nbsp; &nbsp;{{ payment.paymentMethod }}&nbsp;</td>
                <td style="padding: 0px 8px;">{{ payment.clientContact.balanceAt|moneyformat }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    body{
        font-family: sans-serif;
    }
    table {
        border-collapse: collapse;
    }
    .allocation-table table tr,td,th {
        padding: 4px 2px;
    }
    .data-table tr,td,th{
        padding: 8px 2px;
    }
    .data-table tr:nth-child(even){
        background-color: #dddddd;
    }
    .data-table td.subline {
        color: #555555;
        font-style: italic;
    }
</style>
<div class="content" style="margin: 30px;">
    {% if financialsettings.showInvoiceItemOnPaymentReceipt %}

        {% for financialAllocation in financialAllocations %}

            {% if financialAllocation.invoice %}
                {% set invoice = financialAllocation.invoice %}
                <table class="allocation-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="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 class="allocation-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:1rem; line-height:2;">
            <tbody>
            <tr style="">
                <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 %}

<div style="padding-bottom: 50px; background-color: #F5F5F5;">
    <div style="text-align: center;"><br/>
        <br/>
        <strong>Thank you for choosing
            {{ business.name }}</strong><br/>
        <br/>
        {{ business.postalAddress.addressText(false, true) }}&nbsp;&bull;
        {{ business.phoneNumber }}&nbsp;&bull;
        {{ business.businessEmail }}</div>
</div>