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

{% block page_account_main_content %}
    {% set settings = page.settings %}
    {% set account = page.account %}
    <div class="rl-account">
        <div class="rz-account-welcome rl-account-head">
            <span class="rz-account-word" aria-hidden="true">Karte</span>
            <h1>Kundenkarte</h1>
            <p>Sammle online und in der Filiale Punkte und löse sie im Warenkorb ein.</p>
        </div>

        {% if account is null %}
            <div class="rl-enroll">
                <div>
                    <h2>Noch keine Karte?</h2>
                    <p>Aktiviere deine Kundenkarte kostenlos{% if settings.welcomeBonus %} – <strong>{{ settings.welcomeBonus }} Punkte Willkommensbonus</strong> gibt's sofort dazu{% endif %}.</p>
                </div>
                <form action="{{ path('frontend.riccardo.loyalty.enroll') }}" method="post">
                    <button class="btn btn-primary btn-lg" type="submit">Kundenkarte aktivieren</button>
                </form>
            </div>
        {% else %}
            {% set holder = [context.customer.firstName, context.customer.lastName]|join(' ')|trim %}
            <div class="rl-account-grid">
                <div class="rl-account-card">
                    {% sw_include '@RiccardoLoyalty/storefront/riccardo-loyalty/card.html.twig' with { account: account, settings: settings, holder: holder } %}
                    {% if not account.active %}<p class="rl-card-blocked">Diese Karte ist gesperrt. Bitte melde dich bei uns.</p>{% endif %}
                </div>

                <dl class="rl-stats">
                    <div class="rl-stat rl-stat--main">
                        <dt>Einlösbar</dt>
                        <dd>{{ (account.balance * settings.pointValue)|currency }}</dd>
                    </div>
                    <div class="rl-stat">
                        <dt>Vorgemerkt</dt>
                        <dd>{{ account.pending|number_format(0, ',', '.') }} <small>Punkte</small></dd>
                    </div>
                    <div class="rl-stat">
                        <dt>Insgesamt gesammelt</dt>
                        <dd>{{ account.earnedTotal|number_format(0, ',', '.') }} <small>Punkte</small></dd>
                    </div>
                    <div class="rl-stat">
                        <dt>Eingelöst</dt>
                        <dd>{{ account.redeemedTotal|number_format(0, ',', '.') }} <small>Punkte</small></dd>
                    </div>
                </dl>
            </div>

            {% if account.balance < settings.minRedeemPoints %}
                {% set progress = ((account.balance / settings.minRedeemPoints) * 100)|round(0, 'floor') %}
                <div class="rl-next">
                    <p>Noch <strong>{{ (settings.minRedeemPoints - account.balance)|number_format(0, ',', '.') }} Punkte</strong> bis zur ersten Einlösung.</p>
                    <div class="rl-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ progress }}" aria-label="Fortschritt bis zur ersten Einlösung"><span style="width: {{ progress }}%"></span></div>
                </div>
            {% endif %}
            {% if account.pending > 0 %}
                <p class="rl-pending-hint">Vorgemerkte Punkte werden gutgeschrieben, {{ settings.creditOn == 'payment_paid' ? 'sobald deine Zahlung eingegangen ist' : 'sobald deine Bestellung abgeschlossen ist' }}.</p>
            {% endif %}
        {% endif %}

        {% sw_include '@RiccardoLoyalty/storefront/riccardo-loyalty/steps.html.twig' with { settings: settings } %}

        {% if account %}
            <section class="rl-history" aria-labelledby="rl-history-title">
                <h2 id="rl-history-title">Buchungen</h2>
                {% if page.transactions|length %}
                    <ul class="rl-history-list">
                        {% set labels = { welcome: 'Willkommensbonus', earn: 'Online-Bestellung', redeem: 'Eingelöst', store: 'Filiale', manual: 'Gutschrift' } %}
                        {% for tx in page.transactions %}
                            <li class="rl-tx is-{{ tx.status }}">
                                <span class="rl-tx-date">{{ tx.createdAt|format_date('medium', locale: 'de-DE', timezone: 'Europe/Berlin') }}</span>
                                <span class="rl-tx-text">
                                    <strong>{{ tx.description ?: labels[tx.type]|default(tx.type) }}</strong>
                                    <small>{{ labels[tx.type]|default(tx.type) }}{% if tx.status == 'pending' %} · vorgemerkt{% elseif tx.status == 'cancelled' %} · storniert{% endif %}</small>
                                </span>
                                <span class="rl-tx-points {{ tx.points >= 0 ? 'is-plus' : 'is-minus' }}">{{ tx.points >= 0 ? '+' : '−' }}{{ tx.points|abs|number_format(0, ',', '.') }}</span>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p>Noch keine Buchungen.</p>
                {% endif %}
            </section>
        {% endif %}
    </div>
{% endblock %}