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

{% block members_content %}

    <div class="membersContentWrap">

        {% include 'includes/elements/intro_block.twig' with {
            intro_title: 'Orders',
            intro_content: false,
            class: 'membersIntro',
            use_h1: true
        }%}


        {% if member_orders | length < 1 %}
            <p>You have no past orders</p>
        {% else %}

        <ul class="recentOrders">
            {% for order in member_orders %}
                <li>

                    <div class="innerorderWrap">
                        
                        <header class="orderHeader">
                            
                            <h5 class="orderTitle">
                                <span class="orderID">
                                    Order ID: {{ order.id }} {{ (order.subscriptions | length > 0) ? '/ SUBSCRIPTION' : '' }}
                                </span>
                                
                                <span class="orderRef">
                                    Ref: {{ order.order_ref ?: ' - ' }}
                                </span>
                            </h5>
                            
                        </header>

                        <div class="orderContent">
                            
                            
                            <div class="orderDetails">
                                
                                {% if not order.paid %}
                                    <div class="error">
                                        <p>Failed payment</p>
                                    </div> <!-- .error -->
                                {% endif %}
                                
                                <div class="row">
                                    <div class="orderDate">
                                        <span class="orderLabel">Date: </span>{{ order.date }}
                                    </div>
                                </div> <!-- .row -->

                                {% if order.subscriptions is not empty %}
                                    <div class="row wysiwyg subscriptionsArea">
                                        
                                        <span class="orderLabel">Subscriptions: </span>
    
                                        <ol class="subscriptionList">
                                            {% for sub in order.subscriptions %}
                                                <li>
                                                    Subscription id:{{ sub.id }}
                                                    (Issue {{ sub.getIssueNumber(order) }} of {{ sub.max_number_of_issues }})
                                                </li>
                                            {% endfor %}
                                        </ol>
                                        
                                    </div> <!-- .row -->
                                {% endif %}
                                
                                <div class="row wysiwyg orderListRow">

                                    <span class="orderLabel">Order: </span>
                                    
                                    <ol class="orderList">
                                        {% for item in order.items %}
                                            <li>
                                                {{ (item.item_name ~ '<br />' ~ (item.size|not_one_size))|raw }}
                                            </li>
                                        {% endfor %}
                                    </ol>
                                </div>
                                
                                <div class="row">
                                    <span class="orderLabel">Status: </span> {{ order.statusObj.name }}
                                </div> <!-- .row -->

                                {% if account_orders[order.id] is defined %}
                                    {% set po = account_orders[order.id] %}
                                    <div class="row poDetails">
                                        <span class="orderLabel">PO Number: </span> {{ po.po_number }}
                                    </div>
                                    <div class="row poStatus">
                                        <span class="orderLabel">PO Status: </span>
                                        {% if po.status == 'paid' %}
                                            <span class="poStatusBadge poStatusBadge--paid">Paid</span>
                                        {% else %}
                                            <span class="poStatusBadge poStatusBadge--unpaid">Payment Outstanding</span>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                <div class="row">
                                    <span class="orderLabel">Cost: </span> &pound;{{ order.cost_total|number_format(2) }}
                                </div> <!-- .row -->
                            </div>
                            
                        </div> <!-- .orderContent -->
                        
                        <footer class="orderFooter">

                            <div class="buttonWrapper">
                                <a href="{{ route('members-order', {'id' : order.id}, false) }}" class="button">View Order</a>

                                <a href="{{ route('members-reorder', {'id' : order.id}, false) }}" class="button">
                                    Re-Order
                                </a>

                                {% if account_orders[order.id] is defined and account_orders[order.id].status == 'unpaid' %}
                                    <a href="{{ route('b2b.account.orders', {}, false) }}" class="button button--highlight">
                                        Pay Now
                                    </a>
                                {% endif %}

                            </div> <!-- .buttonWrapper -->
                            
                        </footer>

                    </div> <!-- .innerorderWrap -->

                </li>
            {% endfor %}
        </ul>

        {% endif %}

    </div> <!-- .membersContentGrid -->

{% endblock %}
