<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style>


    * {
        box-sizing: border-box;
    }
    img {
        display: block;
        width: 100%;
        border: none;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    td {
        padding: 0;
    }

    .align-left {
        text-align: left !important;
    }
    .no-border {
        border: none !important;
    }
    .page-break {
        page-break-after: always;
    }

    .invoice {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 60px;
        padding-bottom: 45px;
        font-family: 'Arial', sans-serif;
        /*width: 596px;*/
        /*height: 841px;*/
        /*background: #efefef;*/
    }

    .invoice__logo {
        display: block;
        margin-left: auto;
        width: 300px;
        height: 72px;
        text-align: right;
    }

    .invoice__company {
        margin-top: 40px;
        font-size: 15px;
        line-height: 1.4;
    }

    .invoice__title {
        margin-top: 50px;
        font-size: 32px;
        line-height: 1.2;
        text-align: right;
    }

    .invoice__subject {
        margin-top: 30px;
    }

    .invoice-subject {
        border-top: 1px solid rgba(153, 150, 145, 0.4);
        width: 100%;
    }

    .invoice-subject__area {
        vertical-align: top;
        border-bottom: 1px solid rgba(153, 150, 145, 0.4);
    }

    .invoice-subject__divider {
        /*width: 35px;*/
    }

    .invoice-subject__header {
        font-size: 13px;
        line-height: 1.2;
        font-weight: bold;
    }

    .invoice-subject__header td {
        border-bottom: 1px solid rgba(153, 150, 145, 0.4);
        padding: 5px 0;
    }

    .invoice-subject__value {
        font-size: 13px;
        line-height: 1.2;
    }

    .invoice-subject__value td {
        padding: 5px 0;
    }



    .invoice__main-area {
        display: block;
        margin-bottom: 40px;
        background: #edf1f6;
        padding: 0 8px 8px;
    }

    .invoice-products {
        margin-top: 50px;
    }

    .invoice-products__header th {
        padding: 5px 0 7px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        font-size: 13px;
        line-height: 1.2;
        font-weight: bold;
        text-align: right;
    }

    .invoice-products td {
        font-size: 13px;
        line-height: 1.2;
        padding: 8px 0;
        text-align: right;
    }

    /*tr td:nth-child(1) {*/
        /*background: green;*/
    /*}*/

    /*tr td:nth-child(2) {*/
        /*background: yellow;*/
    /*}*/

    /*tr td:nth-child(3) {*/
        /*background: red;*/
    /*}*/

    /*tr td:nth-child(4) {*/
        /*background: blue;*/
    /*}*/

    /*tr td:nth-child(5) {*/
        /*background: pink;*/
    /*}*/

    /*tr td:nth-child(6) {*/
        /*background: purple;*/
    /*}*/

    .invoice-summary {
        margin-top: 150px;
    }
    .invoice-summary td {
        font-size: 13px;
        line-height: 1.2;
        padding: 3px 0;
        text-align: right;
    }
    .invoice-summary__sub-total td{
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.4);
    }
    .invoice-summary__vat td{
        padding-bottom: 15px;
    }
    .invoice-summary__total td{
        font-weight: bold;
        border-top: 2px solid rgba(0, 0, 0, 0.4);
        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    }

    .payment-message{
        margin: 10px 0 40px;
        padding: 10px 0;
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
        font-weight: bold;
        background-color: #edf1f6;
    }

    .invoice-business{
        margin: 5px 0;
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
        font-weight: bold;
    }


</style>

<div class="invoice">

    <?php $siteUrl = 'https://netwerkbrabant.nl'; ?>

    <div class="invoice__logo">
        <img alt="Netwerk Brabant logo" src="{{ asset('img/pdf/logo-netwerk-brabant.jpg') }}">
    </div>

    <p class="invoice__company">
        <strong>{{$order->invoice_company}}</strong><br/>
        {{ $order->invoice_first_name }} {{ $order->invoice_last_name }}<br/>
        {{ $order->invoice_address }}<br/>
        {{ $order->invoice_postal }} {{ $order->invoice_city }}<br/>
    </p>

    <h1 class="invoice__title">@lang('site/pdf.invoice.title')</h1>

    <table cellspacing="0" class="invoice__subject  invoice-subject">
        <tr>
            <td class="invoice-subject__area  invoice-subject__name" style="width: 45%; height: 80px;">
                <table cellspacing="0">
                    <tr class="invoice-subject__header">
                        <td>@lang('site/pdf.invoice.subject')</td>
                    </tr>
                    <tr class="invoice-subject__value">
                        <td>@lang('site/pdf.invoice.eventOrder')</td>
                    </tr>
                </table>
            </td>
            <td class="invoice-subject__divider" style="width: 5%">&nbsp;</td>
            <td class="invoice-subject__area  invoice-subject__date" style="width: 50%; height: 80px;">
                <table cellspacing="0">
                    <tr class="invoice-subject__header">
                        <td>@lang('site/pdf.invoice.date')</td>
                        <td>@lang('site/pdf.invoice.invoiceId')</td>
                    </tr>
                    <tr class="invoice-subject__value">
                        <td>{{ $order->created_at->format('j') }} @lang('calendar.monthNames.'. ($order->created_at->format('n') - 1) ) {{ $order->created_at->format('Y') }}</td>
                        <td>{{ $order->invoice_id_prefixed }}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <div class="invoice__main-area">

        <table cellspacing="0" class="invoice-products">
            <tr class="invoice-products__header">
                <th style="width: 50%;" class="align-left">@lang('site/pdf.invoice.table.description')</th>
                <th style="width: 8%;">@lang('site/pdf.invoice.table.amount')</th>
                <th style="width: 14%;">@lang('site/pdf.invoice.table.price')</th>
                <th style="width: 10%;">@lang('site/pdf.invoice.table.vat')</th>
                <th style="width: 3%;">&nbsp;</th>
                <th style="width: 15%;">@lang('site/pdf.invoice.table.total')</th>
            </tr>

            @foreach($order->products as $product)
                <tr>
                    <td style="width: 50%;" class="align-left">@lang('site/pdf.invoice.table.event') {{ $product->name }}</td>
                    <td style="width: 8%;">1</td>
                    <td style="width: 14%;">€ {{ $product->getFormattedPrice(false, ',', '') }}</td>
                    <td style="width: 10%;">{{ $product->vat }}</td>
                    <td style="width: 3%;">&nbsp;</td>
                    <td style="width: 15%;">
                        <table cellspacing="0">
                            <tr>
                                <td style="width: 10%;" class="align-left">€</td>
                                <td style="width: 90%;">{{ $product->getFormattedPrice(true, ',', '') }}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            @endforeach
        </table>

        <table cellspacing="0" class="invoice-summary">

            <tr class="invoice-summary__sub-total">
                <td style="width: 50%;" class="no-border">&nbsp;</td>
                <td style="width: 30%;">@lang('site/pdf.invoice.table.totalWithoutVat')</td>
                <td style="width: 3%;">&nbsp;</td>
                <td style="width: 2%;" class="align-left">€</td>
                <td style="width: 13%;">{{ $order->getFormattedPrice(false, ',', '') }}</td>
            </tr>
            <tr class="invoice-summary__vat">
                <td style="width: 50%;" class="no-border">&nbsp;</td>
                <td style="width: 30%;">@lang('site/pdf.invoice.table.totalBTW')</td>
                <td style="width: 3%;">&nbsp;</td>
                <td style="width: 2%;" class="align-left">€</td>
                <td style="width: 13%;">{{ $order->getFormattedVat(',', '') }}</td>
            </tr>
            <tr class="invoice-summary__total">
                <td style="width: 50%;" class="no-border">&nbsp;</td>
                <td style="width: 30%;">@lang('site/pdf.invoice.table.totalOrder')</td>
                <td style="width: 5%;">&nbsp;</td>
                <td style="width: 2%;" class="align-left">€</td>
                <td style="width: 13%;">{{ $order->getFormattedPrice(true, ',', '') }}</td>
            </tr>

        </table>

    </div>

    <p class="payment-message">
        Betalingstermijn: Payment Service Provider
    </p>

    <p class="invoice-business">
        {{ config('site.company.name') }} | {{ config('site.company.invoice.address') }} | {{ config('site.company.invoice.zip') }} {{ config('site.company.invoice.city') }} | T: {{config('site.company.phone.display')}} | E: {{config('site.company.email')}}
    </p>
    <p class="invoice-business">
        {{ config('site.company.url_www') }} | KvK {{ config('site.company.kvk') }} | BTW {{ config('site.company.btw') }} | Bank {{ config('site.company.iBan') }}
    </p>

</div>