{% include "pdfPrintAssets/header.html.twig" %}

<style>

    /* reset */

    * {
        border: 0;
        box-sizing: content-box;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        line-height: inherit;
        list-style: none;
        margin: 0;
        padding: 0;
        text-decoration: none;
        vertical-align: top;
    }


    /* heading */

    h1 {
        font: bold 100% sans-serif;
        letter-spacing: 0.5em;
        text-align: center;
        text-transform: uppercase;
    }

    /* table */

    table {
        font-size: 75%;
        table-layout: fixed;
        width: 100%;
        border-collapse: separate;
        border-spacing: 2px;
    }

    th, td {
        border-width: 1px;
        padding: 0.5em;
        position: relative;
        text-align: left;
    }

    th, td {
        border-radius: 0.25em;
        border-style: solid;
    }

    th {
        background: #EEE;
        border-color: #BBB;
    }

    td {
        border-color: #DDD;
    }

    /* page */

    html {
        font: 16px/1 'Open Sans', sans-serif;
        overflow: auto;
        padding: 0.5in;
    }

    html {
        background: #999;
        cursor: default;
    }

    body {
        box-sizing: border-box;
        height: 11in;
        margin: 0 auto;
        overflow: hidden;
        padding: 0.5in;
        width: 8.5in;
    }

    body {
        background: #FFF;
        border-radius: 1px;
        box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
    }

    /* header */

    header {
        margin: 0 0 3em;
    }

    header:after {
        clear: both;
        content: "";
        display: table;
    }

    header h1 {
        background: #000;
        border-radius: 0.25em;
        color: #FFF;
        margin: 0 0 1em;
        padding: 0.5em 0;
    }

    header address {
        float: left;
        font-size: 75%;
        font-style: normal;
        line-height: 1.25;
        margin: 0 1em 1em 0;
    }

    header address p {
        margin: 0 0 0.25em;
    }

    header span, header img {
        display: block;
        float: right;
    }

    header span {
        margin: 0 0 1em 1em;
        max-height: 25%;
        max-width: 60%;
        position: relative;
    }

    header img {
        max-height: 100%;
        max-width: 100%;
    }

    header input {
        cursor: pointer;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    /* article */

    article, article address, table.meta, table.inventory {
        margin: 0 0 3em;
    }

    article:after {
        clear: both;
        content: "";
        display: table;
    }

    article h1 {
        clip: rect(0 0 0 0);
        position: absolute;
    }

    article address {
        float: left;
        font-size: 125%;
        font-weight: bold;
    }

    /* table meta & balance */

    table.meta, table.balance {
        float: right;
        width: 36%;
    }

    table.meta:after, table.balance:after {
        clear: both;
        content: "";
        display: table;
    }

    /* table meta */

    table.meta th {
        width: 40%;
    }

    table.meta td {
        width: 60%;
    }

    /* table items */

    table.inventory {
        clear: both;
        width: 100%;
    }

    table.inventory th {
        font-weight: bold;
        text-align: center;
    }

    table.inventory td:nth-child(1) {
        width: 26%;
    }

    table.inventory td:nth-child(2) {
        width: 38%;
    }

    table.inventory td:nth-child(3) {
        text-align: right;
        width: 12%;
    }

    table.inventory td:nth-child(4) {
        text-align: right;
        width: 12%;
    }

    table.inventory td:nth-child(5) {
        text-align: right;
        width: 12%;
    }

    /* table balance */

    table.balance th, table.balance td {
        width: 50%;
    }

    table.balance td {
        text-align: right;
    }

    /* aside */

    aside h1 {
        border: none;
        border-width: 0 0 1px;
        margin: 0 0 1em;
    }

    aside h1 {
        border-color: #999;
        border-bottom-style: solid;
    }

    /* javascript */

    @media print {
        * {
            -webkit-print-color-adjust: exact;
        }

        html {
            background: none;
            padding: 0;
        }

        body {
            box-shadow: none;
            margin: 0;
        }

        span:empty {
            display: none;
        }

    }

    @page {
        margin: 0;
    }

</style>


<html>
<head>
    <meta charset="utf-8">
    <title>{{ 'Invoice' }}</title>
</head>
<body>
<header>
    <h1>{{ 'Invoice' | trans }} - {{ invoice.getInvReference() }}</h1>
    <address>
        <p> {{ invoice.getInvoiceGeneratedForUnregisterUsername is empty ? invoice.getInvGeneratedFor.getFullName : invoice.getInvoiceGeneratedForUnregisterUsername ~ ' (Un-register user)' }} </p>
        {% if  invoice.getInvoiceGeneratedForUnregisterUsername is empty %}
            <p>{{ 'User Type: ' ~ invoice.getInvGeneratedFor.getUserType }}</p>
            <p>{{ 'Email: ' ~ invoice.getInvGeneratedFor.getEmail }}</p>
        {% endif %}

    </address>
    <span><img alt="{{ getFreshAppSetting('school_logo_path',true) is empty ? 'School Logo' }}"
               src="{{ getFreshAppSetting('school_logo_path') }}"></span>
</header>
<article>
    <h1>{{ 'Recipient' | trans }}</h1>
    <address>
        <p>{{ getFreshAppSetting('school_name',true) is empty ? 'School name is missing' }}</p>
    </address>
    <table class="meta">
        <tr>
            <th><span>{{ 'Invoice #' | trans }}</span></th>
            <td><span>{{ invoice.getInvReference() }}</span></td>
        </tr>
        <tr>
            <th><span>{{ 'Generation Date' | trans }}</span></th>
            <td><span>{{ date_format(invoice.getInvGeneratedDatetime) }}</span></td>
        </tr>
        <tr>
            <th><span>{{ 'Due Date' | trans }}</span></th>
            <td><span>{{ date_format(invoice.getInvDueDate) }}</span></td>
        </tr>
        <tr>
            <th><span>{{ 'Status' | trans }}</span></th>
            <td><span>{{ invoice.getTheInvoiceStatus }}</span></td>
        </tr>
        <tr>
            <th><span>{{ 'Amount Due' | trans }}</span></th>
            <td>
                <span id="prefix">{{ getFreshAppSetting('currencyPreFix') }}</span><span>{{ invoice.getTheInvoiceAmountWhichIsNotPaid }}</span>
                <span>{{ getFreshAppSetting('currencySuffex') }}</span></td>
        </tr>
    </table>
    <table class="inventory">
        <thead>
        <tr>
            <th><span>{{ "Description" | trans }}</span></th>
            <th><span>{{ "Price" | trans }}</span></th>
        </tr>
        </thead>
        <tbody>

        {% for invItem in  invoice.getInvoiceItems.toArray() %}
            <tr>
                <td><span>{{ invItem.getInvItemDescription }}</span></td>
                <td>
                    <span data-prefix>{{ getFreshAppSetting('currencyPreFix') }}</span><span>{{ invItem.getInvItemAmount() }}</span>
                    <span>{{ getFreshAppSetting('currencySuffex') }}</span></td>
            </tr>
        {% endfor %}

        </tbody>
    </table>
    <table class="balance">
        <tr>
            <th><span>{{ 'Total' | trans }}</span></th>
            <td>
                <span data-prefix>{{ getFreshAppSetting('currencyPreFix') }}</span><span>{{ invoice.getTotalAmountOfInvoice }}</span>
                <span>{{ getFreshAppSetting('currencySuffex') }}</span>
            </td>
        </tr>
        <tr>
            <th><span>{{ 'Amount Paid' | trans }}</span></th>
            <td>
                <span data-prefix>{{ getFreshAppSetting('currencyPreFix') }}</span><span>{{ invoice.getTotalAmountOfInvoice - invoice.getTheInvoiceAmountWhichIsNotPaid }}</span>
                <span>{{ getFreshAppSetting('currencySuffex') }}</span></td>
        </tr>
        <tr>
            <th><span>{{ 'Balance Due' | trans }}</span></th>
            <td>
                <span data-prefix>{{ getFreshAppSetting('currencyPreFix') }}</span><span>{{ invoice.getTheInvoiceAmountWhichIsNotPaid }}</span>
                <span>{{ getFreshAppSetting('currencySuffex') }}</span></td>
        </tr>
    </table>
</article>
<aside>
    <h1><span>{{ 'User Notes' | trans }}</span></h1>
    <div>
        <p>{{ invoice.getInvUserNotes }}</p>
    </div>

    <br><br>

    <h1><span>{{ 'System Notes' | trans }}</span></h1>
    <div>
        <p>{{ invoice.getInvSystemNotes }}</p>
    </div>

</aside>
</body>
</html>