{% extends 'layouts/invoice.twig' %}

{% block content %}


    <style>
        table {
            border: none;
        }
        table td {
            padding: 5px;
            border: none;
        }

        table table td {
            border-bottom: 1px solid #d5d5d5;
        }
        table table tr.with-dosage td {
            border-bottom:0;
            padding-bottom:0;
        }
        p {
            margin-bottom: 3px;
        }

        p.dosage {
            font-size: 10px;
        }

        .logo {
            width: 400px;
            padding: 0;
        }

        .uppercase {
            text-transform: uppercase;
        }
    </style>
    {% set font_small = 'font-size: 7px; line-height: 9px;' %}
    {% set font_medium = 'font-size: 8px; line-height: 10px;' %}
    {% set font_large = 'font-size: 9px; line-height: 11px;' %}
    <table cellspacing="0" border="0" width="100%">

        <tr>
            <td colspan="2" align="left " valign="middle" width="40%">
                <img src="{{ settings.SITE_URL ~ settings.THEME_URL }}/images/logo.png" alt="{{ config('app.name') }}" class="logo" style="margin:0;"/>
            </td>
            <td colspan="3" valign="middle"  align="right" width="60%" style="{{ font_small }}">
                <span style="display: block; "><strong>Order Invoice:</strong> #{{ order.order_ref }}</span>
                <br>
                <strong>Date of Order:</strong> {{ order_date|date('d/m/y') }}
                <br>
                <strong>Shipping:</strong> {{ order.delivery.name }}

            </td>
        </tr>

        <tr>

            <td colspan="3" style="border: none; {{ font_medium }} width: 40%; vertical-align: top;">
                <p><strong>Customer</strong></p>
                {% if order.info.email is not empty %}Email: {{ order.info.email }}<br>{% endif %}{% if order.info.contact_no is not empty %}Phone: {{ order.info.contact_no }}<br>{% endif %}
            </td>

            <td colspan="2" style="border: none; {{ font_medium }} width: 60%; vertical-align: top;" align="right">
                <p><strong>Shipping Info</strong></p>
                {{ order.address.shipping.firstname ~ ' ' ~ order.address.shipping.lastname }}<br />
                {{ order.address.shipping.address1 }}
                {% if order.address.shipping.address2 is not empty %}
                    {{ order.address.shipping.address2 }}<br />
                {% endif %}
                {{ order.address.shipping.city }}<br/>
                {% if order.address.shipping.state is not empty %}
                    {{ order.address.shipping.state }}<br />
                {% endif %}
                {{ basket_countries[order.address.shipping.country] }}<br/>
                <span class="uppercase">argsfdg</span><br/>
            </td>
        </tr>


        {% if order.info.message is not empty %}
            <tr>
                <td colspan="5">
                    Message: {{ order.info.message }}<br>
                </td>
            </tr>
        {% endif %}

        <tr>
            <td style="border:none;padding:0;" colspan="5">

                <table class="totals" width="100%">
                    <tr style="{{ font_medium }}">
                        <td width="45%" align="left" valign="middle">
                            <p><strong>Product</strong></p>
                        </td>
                        <td width="29%" align="left" valign="middle">
                            <p><strong>Size / Option</strong></p>
                        </td>

                        <td width="8%" valign="middle" align="center">
                            <p><strong>Qty</strong></p>
                        </td>

                        <td width="18%" valign="middle" align="right">
                            <p><strong>Price</strong></p>
                        </td>
                    </tr>
                    {% for line_item in line_items %}
                        <tr>
                            <td colspan="4" style="line-height:40%; border-top:1px solid #333;"></td>
                        </tr>
                        <tr style="{{ font_medium }}"{% if line_item.dosage is not empty %} class="with-dosage"{% endif %}>
                            <td><strong>{{ line_item.item_name }}</strong></td> <!-- / product -->
                            <td>{% if line_item.size is not empty %}
                                    {{ line_item.size }}{% if line_item.colour is not empty %} / {{ line_item.colour }}{% endif %}
                                {% endif %}</td>
                            <td valign="middle" align="center">{{ line_item.quantity }}</td>
                            <td valign="middle" align="right">{{ line_item.line_total|currency_format() }}</td>
                        </tr>
                        <tr>
                            <td colspan="4" style="line-height:20%;"></td>
                        </tr>
                        {% if line_item.dosage is not empty %}
                            <tr>
                                <td colspan="5">
                                    <p class="dosage">Dosage: {{ line_item.dosage }}</p>
                                </td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    <tr>
                        <td colspan="4" style="line-height:10%; border-top:1px solid #333;"></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right" style="{{ font_large }}">
                            <p>Subtotal</p>
                        </td>
                        <td align="right" style="{{ font_large }}">
                            <p>{{ order.getSubtotalCost()|currency_format() }}</p>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right" style="{{ font_large }}"><p>Delivery (incl. VAT)</p></td>
                        <td align="right" style="{{ font_large }}"><p>{{ order.getDelivery().cost|currency_format() }}</p></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right" style="{{ font_large }}"><p style="{{ font_large }}">VAT</p></td>
                        <td align="right" style="{{ font_large }}">{{ order.getVatCost()|currency_format() }}</td>
                    </tr>
                    {% if order.coupon_deduct > 0 %}
                        <tr>
                            <td colspan="3" align="right" style="{{ font_large }}">Coupon deduct</td>
                            <td align="right" style="{{ font_large }}">-{{ order.coupon_deduct|currency_format() }}</td>
                        </tr>
                    {% endif %}
                    <tr>
                        <td colspan="3" align="right" style="border: none;"><strong style="{{ font_large }};">Total</strong></td>
                        <td align="right" style="border: none;"><strong style="{{ font_large }}">{{ order.amount_paid|currency_format() }}</strong></td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td align="center" colspan="5" style="{{ font_small }};">
                <p style="text-align: justify;"><strong>Note:</strong> In the unlikely event you receive an incomplete, damaged or incorrect order,
                    you must notify us within 24 hours of receipt. In the event of damage, you must retain all packaging.
                    We may ask for photos in order to submit a claim to our carrier.
                </p>
                <p style="text-align: justify;">If you need any help, advice or information about your treatment, symptoms or medical condition you can contact us by email or telephone to speak to a health professional. You can also find further information and re-order treatments from your account.
                </p>
            </td>
        </tr>

    </table>
{% endblock %}
