{% sw_extends '@Storefront/storefront/page/account/_page.html.twig' %}

{% block page_account_main_content %}
    <div class="rz-abos">
        <div class="rz-account-welcome rz-abos-head">
            <span class="rz-account-word" aria-hidden="true">Abo</span>
            <h1>Meine Abos</h1>
            <p>Deine Lieblingsartikel kommen automatisch. Hier änderst du Rhythmus und Menge, pausierst oder kündigst.</p>
        </div>

        {% if abos is empty %}
            <div class="rz-abos-empty">
                <h2>Noch kein Abo</h2>
                <p>Auf jeder Artikelseite findest du unter dem Warenkorb-Knopf die Abo-Box{% if settings.discountPercent > 0 %} – mit {{ settings.discountPercent|replace({'.': ','}) }} % Abo-Rabatt auf jede Lieferung{% endif %}.</p>
                <a class="btn btn-primary" href="{{ path('frontend.home.page') }}">Zum Shop</a>
            </div>
        {% endif %}

        {% for abo in abos %}
            {% set active = abo.status == 'active' %}
            {% set paused = abo.status == 'paused' %}
            {% set cancelled = abo.status == 'cancelled' %}
            <article class="rz-abo-card rz-abo-card--{{ abo.status }}">
                <header class="rz-abo-card-head">
                    <div>
                        <span class="rz-abo-status">{% if active %}Aktiv{% elseif paused %}Pausiert{% else %}Gekündigt{% endif %}</span>
                        <h2 class="rz-abo-card-title">
                            <a href="{{ seoUrl('frontend.detail.page', {productId: abo.productId}) }}">{{ abo.productName }}</a>
                        </h2>
                        <p class="rz-abo-meta">{{ abo.number }} · {{ abo.quantity }} Stück · alle {{ abo.intervalWeeks }} Wochen{% if abo.paymentMethodName %} · {{ abo.paymentMethodName }}{% endif %}{% if abo.discountPercent > 0 %} · {{ abo.discountPercent|replace({'.': ','}) }} % Abo-Rabatt{% endif %}</p>
                    </div>
                    <div class="rz-abo-next">
                        {% if active %}
                            <span>Nächste Lieferung</span>
                            <strong>{{ abo.nextRun|date('d.m.Y', 'Europe/Berlin') }}</strong>
                        {% elseif paused %}
                            <span>Pausiert</span>
                            <strong>{{ abo.note ? 'siehe Hinweis' : 'bis du fortsetzt' }}</strong>
                        {% else %}
                            <span>Gekündigt am</span>
                            <strong>{{ abo.cancelledAt|date('d.m.Y', 'Europe/Berlin') }}</strong>
                        {% endif %}
                    </div>
                </header>

                {% if abo.note and not cancelled %}
                    <p class="rz-abo-note">{{ abo.note }}</p>
                {% endif %}

                {% if abo.lastOrderNumber %}
                    <p class="rz-abo-last">Letzte Lieferung: Bestellung {{ abo.lastOrderNumber }} am {{ abo.lastRunAt|date('d.m.Y', 'Europe/Berlin') }} · {{ abo.runCount }} {{ abo.runCount == 1 ? 'Lieferung' : 'Lieferungen' }} bisher</p>
                {% endif %}

                {% if not cancelled %}
                    <div class="rz-abo-actions">
                        <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'intervall'}) }}" method="post" class="rz-abo-inline">
                            <label>Rhythmus
                                <select name="interval" class="form-select form-select-sm" onchange="this.form.submit()">
                                    {% for weeks in settings.intervals %}
                                        <option value="{{ weeks }}"{% if weeks == abo.intervalWeeks %} selected{% endif %}>alle {{ weeks }} Wochen</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <noscript><button class="btn btn-sm btn-light" type="submit">Ändern</button></noscript>
                        </form>
                        <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'menge'}) }}" method="post" class="rz-abo-inline">
                            <label>Menge
                                <select name="quantity" class="form-select form-select-sm" onchange="this.form.submit()">
                                    {% for q in 1..settings.maxQuantity %}<option value="{{ q }}"{% if q == abo.quantity %} selected{% endif %}>{{ q }}</option>{% endfor %}
                                </select>
                            </label>
                            <noscript><button class="btn btn-sm btn-light" type="submit">Ändern</button></noscript>
                        </form>

                        <div class="rz-abo-buttons">
                            {% if active %}
                                <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'jetzt'}) }}" method="post"><button class="btn btn-sm btn-primary" type="submit">Jetzt liefern</button></form>
                                <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'ueberspringen'}) }}" method="post"><button class="btn btn-sm btn-light" type="submit">Nächste überspringen</button></form>
                                <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'pausieren'}) }}" method="post"><button class="btn btn-sm btn-light" type="submit">Pausieren</button></form>
                            {% else %}
                                <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'fortsetzen'}) }}" method="post"><button class="btn btn-sm btn-primary" type="submit">Fortsetzen</button></form>
                            {% endif %}
                            <form action="{{ path('frontend.riccardo.abo.action', {id: abo.id, action: 'kuendigen'}) }}" method="post" onsubmit="return confirm('Abo {{ abo.number }} wirklich kündigen? Es werden keine weiteren Lieferungen ausgelöst.');">
                                <button class="btn btn-sm btn-link rz-abo-cancel" type="submit">Kündigen</button>
                            </form>
                        </div>
                    </div>
                {% endif %}
            </article>
        {% endfor %}

        <p class="rz-abos-foot">
            Jede Lieferung ist eine eigene Bestellung zum dann gültigen Preis. Du bekommst wie gewohnt eine Bestellbestätigung.
            Kündigen kannst du hier, oder ohne Anmeldung über <a href="{{ path('frontend.riccardo.abo.cancel.page') }}">Verträge hier kündigen</a>.
            {% if settings.termsUrl %}<a href="{{ settings.termsUrl }}">Abo-Bedingungen</a>{% endif %}
        </p>
    </div>
{% endblock %}