{% extends 'layout.html.twig' %}

{% set seo_title = 'Order ' ~ order.orderNumber %}

{% block content %}
    <div class="container">
        <div class="breadcrumbs">
            <div class="breadcrumbs-item">
                <a href="{{ path('account_index') }}" class="breadcrumbs-link">Account</a>
            </div>
            <div class="breadcrumbs-item">
                <a href="{{ path('account_index') }}" class="breadcrumbs-link">Order History</a>
            </div>
        </div>

        <h1>Order {{ order.orderNumber }} | {{ order.orderDate|date('d.m.y') }}</h1>

        {% for shipment in order.orderShipments %}
            <div class="account-order-shipment account-order-shipment-shipped">
                <h2 class="account-order-shipment-title">
                    Shipment No.{{ loop.index }}
                    <span class="account-order-shipment-title-divider">|</span>
                    <span class="account-order-shipment-status">Dispatched</span>
                </h2>

                <div class="account-order-shipment-details">
                    <div class="account-order-details">
                        <div class="account-order-details-item">
                            <div class="account-order-details-heading">Shipping Date</div>
                            {{ shipment.shipmentDate|date('d.m.y') }}
                        </div>
                        <div class="account-order-details-item">
                            <div class="account-order-details-heading">Courier</div>
                            {{ shipment.courierName }}
                        </div>
                        <div class="account-order-details-item">
                            <div class="account-order-details-heading">Consignment Number</div>
                            {{ shipment.consignmentNumber ?? '—' }}
                        </div>
                    </div>
                    {% if shipment.trackingUrl %}
                        <div class="account-order-shipment-button">
                            <a href="{{ shipment.trackingUrl }}" target="_blank" class="btn btn-primary btn-block btn-more">Track delivery</a>
                        </div>
                    {% else %}
                        <div class="account-order-shipment-button">
                            <a href="mailto:sales@texstyle.com.au" class="btn btn-primary btn-block btn-more">Contact Texstyle</a>
                        </div>
                    {% endif %}
                </div>

                <table class="order-table">
                    <thead>
                        <tr>
                            <th>Collection</th>
                            <th>Width</th>
                            <th>Colour</th>
                            <th>Pack size</th>
                            <th>Quantity</th>
                            <th>Drop size(s)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in shipment.orderItems %}
                            <tr class="order-table-item">
                                <td>
                                    <div class="order-table-heading">Collection</div>
                                    {{ item.collection.title }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Width</div>
                                    {{ item.product.length }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Colour</div>
                                    {{ item.part.description }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Pack size</div>
                                    {{ item.product.packSize }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Quantity</div>
                                    {{ item.quantity }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Drop size(s)</div>
                                    {{ item.dropSizes ?: '—' }}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endfor %}

        {% if order.unshippedOrderItems|length %}
            <div class="account-order-shipment account-order-shipment-processing">
                <h2 class="account-order-shipment-title">
                    Shipment No.{{ order.orderShipments|length + 1 }}
                    <span class="account-order-shipment-title-divider">|</span>
                    <span class="account-order-shipment-status">Awaiting Shipment</span>
                </h2>

                <table class="order-table">
                    <thead>
                        <tr>
                            <th>Collection</th>
                            <th>Width</th>
                            <th>Colour</th>
                            <th>Pack size</th>
                            <th>Quantity</th>
                            <th>Drop size(s)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in order.unshippedOrderItems %}
                            <tr class="order-table-item">
                                <td>
                                    <div class="order-table-heading">Collection</div>
                                    {{ item.collection.title }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Width</div>
                                    {{ item.product.length }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Colour</div>
                                    {{ item.part.description }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Pack size</div>
                                    {{ item.product.packSize }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Quantity</div>
                                    {{ item.quantity }}
                                </td>
                                <td>
                                    <div class="order-table-heading">Drop size(s)</div>
                                    {{ item.dropSizes ?: '—' }}
                                </td>
                            </tr>

                            {% if item.part.stockupdate %}
                                <tr class="order-table-stock">
                                    <td colspan="6"><strong>Stock update:</strong> Due on {{ item.part.stockupdate.dateAvailable|date('jS F Y') }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}

        <div class="order-review-details">
            <h2 class="order-review-details-title">Shipping address</h2>
            <strong>{{ order.company }}</strong><br>
            Att: {{ order.firstName }} {{ order.lastName }}<br>
            {{ order.address }}<br>
            {{ order.suburb }}
            {{ order.state }}
            {{ order.postcode }}<br>
            {{ order.country|canary_country }}<br>
            Phone: {{ order.phoneNumber }}
        </div>

        {% if order.purchaseOrderNumber %}
            <div class="order-review-details">
                <h2 class="order-review-details-title">Purchase order number</h2>
                {{ order.purchaseOrderNumber }}
            </div>
        {% endif %}

        {% if order.specialRequests %}
            <div class="order-review-details">
                <h2 class="order-review-details-title">Special requests</h2>
                <p>{{ order.specialRequests|nl2br }}</p>
            </div>
        {% endif %}

        <div class="account-order-button">
            <a href="{{ path('account_index') }}" class="btn btn-primary btn-more">Back to index</a>
        </div>
    </div>
{% endblock %}