{% set shopBillingData = invoice.shopBillingData %}

<html lang="en">
<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Arima+Madurai&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

    <meta charset="utf-8">
    <style>
        body {
            padding: 20px;
            font-family: "Montserrat";
            font-size: 13pt;
        }
        strong {
            font-weight: 700;
        }
        table {
            width: 100%;
            line-height: inherit;
            font-size: 13pt;
            text-align: left;
            border-collapse: collapse;
        }

        .h2 {
            margin-bottom: 0;
            font-family: "Arima Madurai";
        }
        .h4 {
            font-size: 20pt;
            font-weight: 600;
        }

        /* Main infos */
        .main-infos {
            margin-bottom: 20px;
        }
        .top table td { padding-bottom: 60px; }
        .card {
            border: 1px solid #dee2e6;
        }
        .card-header {
            padding: 1.2rem 1.5rem;
            font-weight: 600;
            font-size: 18pt;
            border-bottom: 1px solid #dee2e6;
        }
        .card-body {
            padding: 1.5rem;
        }

        /* Items */
        .table {
            border: 1px solid #dee2e6;
        }
        .table th, .table td {
            padding: 12px 10px;
            vertical-align: middle;
            border: 1px solid #dee2e6;
        }
        .table thead th {
            border-bottom: 2px solid #adb5bd;
            font-weight: 500;
            font-size: 14pt;
        }
        .cart-item-product-name {
            font-size: 14pt;
            font-weight: 600;
        }
        .product-price {
            color: #1A1850;
            font-weight: 600;
            font-size: 14pt;
        }
        .product-price span {
            font-size: 18pt;
        }

        .cart-totals-price {
            font-weight: 500;
            font-size: 14pt;
        }
        .cart-totals-tr-total td {
            padding-bottom: 0;
            font-size: 22pt;
            font-weight: 600;
            border: 0;
        }
        .cart-totals-tr-tax td {
            padding-top: 0;
            border: 0;
        }
        .cart-totals-tr-tax td > div {
            display: flex;
            justify-content: flex-end;
        }
        .cart-totals-tr-tax td > div div:first-child {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <table class="main-infos" cellpadding="0" cellspacing="0">
        <tr class="top">
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="{{ public_path ~ asset('build/dedi/images/logo.svg', 'dedi') }}" width="150" />
                        </td>

                        <td colspan="2" align="right">
                            <h1 class="h2">{{ 'sylius_invoicing_plugin.ui.invoice'|trans }} #{{ invoice.number }}</h1>
                            {{ 'sylius_invoicing_plugin.ui.issued_at'|trans }} : {{ invoice.issuedAt|format_datetime }}<br>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td>
                <table>
                    <tr>
                        <td width="380" valign="top" class="card">
                            <header class="card-header">
                                {{ 'sylius.ui.billing_address'|trans }}
                            </header>
                            <div class="card-body">
                                <address>
                                    <strong>{{ invoice.billingData.firstName }} {{ invoice.billingData.lastName }}</strong><br/>
                                    {% if invoice.billingData.company %}
                                        <strong>{{ invoice.billingData.company }}</strong><br/>
                                    {% endif %}
                                    {{ invoice.billingData.street }}<br/>
                                    {{ invoice.billingData.city }}<br/>
                                    {{ invoice.billingData.countryCode|sylius_country_name|upper }} {{ invoice.billingData.postcode }}
                                </address>
                            </div>
                        </td>

                        <td width="20"></td>

                        {% if shopBillingData and (shopBillingData.street or shopBillingData.city) %}
                            <td width="380" valign="top" class="card">
                                <header class="card-header">
                                    {{ 'sylius.ui.shipping_address'|trans }}
                                </header>
                                <div class="card-body">
                                    <address>
                                        {% if shopBillingData.company %}<strong>{{ shopBillingData.company }}</strong><br/>{% endif %}
                                        {% if shopBillingData.street %}{{ shopBillingData.street }}<br/>{% endif %}
                                        {% if shopBillingData.city %}{{ shopBillingData.city }}<br/>{% endif %}
                                        {% if shopBillingData.taxId %}{{ shopBillingData.taxId }}<br/>{% endif %}
                                        {% if shopBillingData.countryCode and shopBillingData.postcode %}
                                            {{ shopBillingData.countryCode|sylius_country_name|upper }} {{ shopBillingData.postcode }}
                                        {% endif %}
                                    </address>
                                </div>
                            </td>
                        {% else %}
                            <td width="380"></td>
                        {% endif %}
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table class="table">
        <thead>
            <tr class="heading">
                <th>{{ 'sylius.ui.item'|trans }}</th>
                <th align="right">{{ 'sylius.ui.unit_price'|trans }}</th>
                <th align="center">{{ 'sylius.ui.qty'|trans }}</th>
                <th align="right">{{ 'sylius.ui.price'|trans }}</th>
            </tr>
        </thead>

        <tbody>
            {% for item in invoice.lineItems %}
                <tr class="item">
                    <td>
                        <span class="cart-item-product-name">{{ item.name }}</span><br>
                        {% if item.variantName is not null %}({{ item.variantName }}){% endif %}
                    </td>
                    <td align="right" class="product-price">{{ item.unitPrice|sylius_format_money(invoice.currencyCode, invoice.localeCode) }}</td>
                    <td align="center">{{ item.quantity }}</td>
                    <td align="right" class="product-price">{{ item.total|sylius_format_money(invoice.currencyCode, invoice.localeCode) }}</td>
                </tr>
            {% endfor %}
        </tbody>

        <tfoot>
            <tr class="cart-totals-tr-total">
                <td align="right" colspan="4">
                    <strong class="h4">{{ 'sylius.ui.total'|trans }} :</strong>
                    {{ invoice.total|sylius_format_money(invoice.currencyCode, invoice.localeCode) }}
                </td>
            </tr>
            {% if invoice.taxItems.count() > 0 %}
                <tr class="cart-totals-tr-tax">
                    <td colspan="4" class="text-right">
                        <div>
                            <div>{{ 'sylius.ui.taxes_total'|trans }} : <small>({{ 'sylius.ui.included_in_price'|trans }})</small></div>
                            <div>
                                {% for taxItem in invoice.taxItems %}
                                    {{ taxItem.label }} : <span class="cart-totals-price">{{ taxItem.amount|sylius_format_money(invoice.currencyCode, invoice.localeCode) }}</span><br>
                                {% endfor %}
                            </div>
                        </div>
                    </td>
                </tr>
            {% endif %}
        </tfoot>
    </table>
</body>
</html>
