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

{% block members_content %}

    <div class="membersContentWrap">

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

                {% if success is not empty %}
                    <div class="success"><p>{{ success }}</p></div>
                {% endif %}

                {% if error is not empty %}
                    <div class="error"><p>{{ error }}</p></div>
                {% endif %}

                {% if orders|length > 0 %}
                    <p>You have <strong>{{ orders|length }}</strong> outstanding order{{ orders|length > 1 ? 's' : '' }} totalling <strong>{{ total_outstanding|multi_currency|raw }}</strong>.</p>

                    <form action="/trade/account/orders/pay" method="post" id="payOrdersForm">
                        {{ csrf_token('payOrdersForm')|raw }}

                        <table class="accountOrdersTable">
                            <thead>
                                <tr>
                                    <th><div class="row"><input type="checkbox" id="selectAll"><label for="selectAll"></label></div></th>
                                    <th>PO Number</th>
                                    <th>Order Date</th>
                                    <th>Order Ref</th>
                                    <th>Amount Due</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for account_order in orders %}
                                <tr>
                                    <td>
                                        <div class="row">
                                            <input type="checkbox"
                                                   id="order_{{ loop.index }}"
                                                   name="order_ids[]"
                                                   value="{{ account_order.id }}"
                                                   class="orderCheckbox"
                                                   data-amount="{{ account_order.amount_due }}">
                                            <label for="order_{{ loop.index }}"></label>
                                        </div>
                                    </td>
                                    <td>{{ account_order.po_number }}</td>
                                    <td>{{ account_order.created_at|date('d/m/Y') }}</td>
                                    <td>{{ account_order.order ? account_order.order.id : '-' }}</td>
                                    <td>{{ account_order.amount_due|multi_currency|raw }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>

                        <div class="accountOrdersSummary">
                            <p>Selected: <strong id="selectedCount">0</strong> order(s) — Total: <strong id="selectedTotal">{{ 0|multi_currency|raw }}</strong></p>
                            <button type="submit" class="button buttonAlt" id="paySelectedBtn" disabled>Pay Selected Orders</button>
                        </div>
                    </form>

                {% else %}
                    <p>You have no outstanding orders. All payments are up to date.</p>
                {% endif %}

    </div> <!-- .membersContentWrap -->

{% endblock %}
