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

{% block members_content %}

    <div class="membersContentWrap">

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

        {% if request('assessment_renewed') %}
            <div class="success">
                Your assessment has been successfully updated and your subscription has been renewed. Thank you!
            </div>
        {% endif %}

        {% if subscriptions is empty %}
            You have no subscriptions.

        {% else %}

            <ul class="recentOrders">

                {% for subscription in subscriptions %}

                    <li>

                        <div class="innerorderWrap">

                            <header class="orderHeader">

                                <h5 class="orderTitle">
                                    <span class="orderID">
                                         Ref: SUB-{{ '%05d' | format(subscription.id) }}
                                    </span>
                                    <span class="subscriptionStatusBadge subscriptionStatusBadge--{{ subscription.status }}">
                                        {{ subscription.status | capitalize }}
                                    </span>
                                </h5>

                            </header>

                            <div class="orderContent">

                                <div class="orderDetails">

                                    {% if subscription.hasFailedPayment()  %}
                                        <div class="orderPaymentAlert">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <div>
                                                <strong>Payment failed</strong>
                                                <span>Please retry your payment or update your payment method.</span>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if subscription.items is not empty %}
                                        <div class="row subscriptionsArea">

                                            {% for subscription_item in subscription.items %}

                                                <subscription-item
                                                        :item="{{ subscription_item | json_encode }}"
                                                        :subscription-id="{{ subscription.id }}"
                                                        subscription-status="{{ subscription.status }}"
                                                        form-url="/subscription/{{ subscription.id }}/update-subscription-item/"
                                                >
                                                    {{ subscription_item.getDisplayName() }}
                                                </subscription-item>

                                            {% endfor %}

                                        </div> <!-- .row -->
                                    {% endif %}

                                    <subscription-status
                                            classes="row"
                                            status="{{ subscription.status }}"
                                            set-next-issue-date="{{ subscription.next_issue_date }}"
                                            set-next-payment-date="{{ subscription.getNextOrderDate() }}"
                                            update-url="{{ route('fe-subscription-update-subscription', [subscription.id], false) }}"
                                    >
                                        <div class="row subscriptionsStatus">

                                            {% if subscription.status == 'active' and subscription.next_issue_date is not empty %}
                                                <div class="subscriptionsStatus__issue">
                                                    <span class="subscriptionsStatus__label">Next dispatch date: </span>
                                                    <span class="subscriptionsStatus__value">{{ subscription.next_issue_date | date('d/m/Y') }}</span>
                                                </div> <!-- .subscriptionsStatus__issue -->
                                            {% endif %}

                                            {% if subscription.status == 'active' and subscription.getNextOrderDate() is not empty %}
                                                <div class="subscriptionsStatus__issue">
                                                    <span class="subscriptionsStatus__label">Next payment date: </span>
                                                    <span class="subscriptionsStatus__value">{{ subscription.getNextOrderDate() | date('d/m/Y') }}</span>
                                                </div> <!-- .subscriptionsStatus__issue -->
                                            {% endif %}
                                        </div> <!-- .row -->
                                    </subscription-status>

                                </div>

                            </div> <!-- .orderContent -->

                            {% if subscription.status not in ['cancelled', 'expired', 'completed'] %}
                            <footer class="orderFooter">

                                <subscription-actions

                                        next-renewal-date="{{ subscription.next_issue_date ? subscription.next_issue_date | date('Y-m-d') : '' }}"

                                        :has-failed-payment="{% if subscription.hasFailedPayment() and subscription.getLatestFailedPayment() %}true{% else %}false{% endif %}"
                                        pay-url="{% if subscription.getLatestFailedPayment() %}/shop/checkout/basket_overview.php?{{ {'order_id': subscription.getLatestFailedPayment().id, 'subscription_id': subscription.id} | url_encode }}{% endif %}"

                                        pause-url="{{ route('fe-subscription-set-paused', [ subscription.id ] ) }}"
                                        :is-paused="{% if subscription.isPaused() %}true{% else %}false{% endif %}"
                                        :can-be-paused="{% if subscription.can_be_paused %}true{% else %}false{% endif %}"

                                        activate-url="{{ route('fe-subscription-set-active', [ subscription.id ] ) }}"
                                        :is-active="{% if subscription.isActive() %}true{% else %}false{% endif %}"

                                        cancel-url="{{ route('fe-subscription-set-cancelled', [ subscription.id ] ) }}"
                                        :is-cancelled="{% if subscription.isCancelled() %}true{% else %}false{% endif %}"
                                        :cancel-reasons="{{ cancellation_reasons | json_encode }}"

                                        edit-url="{{ subscription.edit_url }}"
                                        :is-editable="{% if subscription.edit_url %}true{% else %}false{% endif %}"

                                        :disable-cancel="false"

                                ></subscription-actions>



                            </footer>
                            {% endif %}

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

                    </li>

                {% endfor %}

            </ul>

            {#
            <div class="subscriptionMessage">
                Please note: All subscriptions require a minimum of 2 deliveries before cancellation is available.
            </div>
            #}

        {% endif %}


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

{% endblock %}
