{% extends "suff/base.html" %}
{% load l10n %}

{% block content %}
<h2>Spenden</h2>

<section class="total-box">
    <span class="total-label">Deine Rechnung</span>
    <span class="total-value">{{ total|floatformat:2 }} €</span>
    {% if paid %}
        <span class="total-label">Bezahlt</span>
        <span class="total-value">{{ paid|floatformat:2 }} €</span>
    {% endif %}
    <span class="total-label">Offen (Drinks)</span>
    <span class="total-value">{{ open_balance|floatformat:2 }} €</span>
</section>

<p class="intro">
    Dein Beitrag deckt die <strong>Drinks</strong> und deine
    <strong>Eintrittsspende</strong>. Die Vorschläge unten runden deinen
    offenen Drink-Betrag auf die nächsten 5&nbsp;€ und legen 10–30&nbsp;€
    Eintritt drauf.
</p>
<p class="intro">
    Du darfst gerne <strong>weniger</strong> geben, wenn das gerade besser
    passt – kein Problem. Und wenn du <strong>mehr</strong> geben kannst,
    hilft uns das sehr, die Kosten für Bands, Toiletten und Technik zu
    decken. So oder so: <strong>danke, dass du da bist!</strong>
</p>

<section>
    <h3>Vorschläge</h3>
    <div class="amount-grid">
        {% for s in suggestions %}
            <a href="?amount={{ s.amount }}" class="amount-btn{% if prefill_amount == s.amount %} amount-btn-active{% endif %}">
                <span class="amount-main">{{ s.amount }} €</span>
                <span class="amount-sub">→ {{ s.entry|floatformat:2 }} € Eintritt</span>
            </a>
        {% endfor %}
        {% if open_balance > 0 %}
            <a href="?amount={{ open_balance_url }}" class="amount-btn amount-btn-weak">
                <span class="amount-main">{{ open_balance|floatformat:2 }} €</span>
                <span class="amount-sub">→ Nur Drinks</span>
            </a>
        {% endif %}
    </div>
</section>

{% if error %}
    <p class="error">{{ error }}</p>
{% endif %}

<form method="post" action="{% url 'suff:pay' %}" class="pay-form">
    {% csrf_token %}
    <label>
        Betrag (€)
        <input type="text" name="amount" inputmode="decimal" pattern="[0-9]+([.,][0-9]{1,2})?"
               value="{% if prefill_value %}{{ prefill_value }}{% else %}{{ suggestions.0.amount }}{% endif %}" required />
    </label>
    <label>
        Methode
        <select name="method" required>
            <option value="">— wählen —</option>
            {% for value, label in payment_methods %}
                <option value="{{ value }}">{{ label }}</option>
            {% endfor %}
        </select>
    </label>
    <label>
        Notiz (optional)
        <input type="text" name="note" maxlength="64" />
    </label>
    <button type="submit" class="btn-primary">Zahlung eintragen</button>
</form>

<div class="link-row">
    <a href="https://www.paypal.com/paypalme/lotharwiener" target="_blank" rel="noopener noreferrer" class="link-btn link-btn-paypal">
        PayPal öffnen
    </a>
</div>

{% if user_payments %}
    <section>
        <h3>Bisherige Zahlungen</h3>
        <ul class="history">
            {% for p in user_payments %}
                <li>
                    <span class="hist-when">{{ p.created_at|date:"d.m. H:i" }}</span>
                    <span class="hist-what">{{ p.get_method_display }}{% if p.note %} – {{ p.note }}{% endif %}</span>
                    <span class="hist-price">{{ p.amount|floatformat:2 }} €</span>
                    {% if phase == "booking" %}
                        <a href="{% url 'suff:delete_payment' p.id %}" class="hist-delete" aria-label="Zahlung löschen">🗑</a>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </section>
{% endif %}

<div class="logout-form">
    <a href="{% url 'suff:me' %}" class="link-btn link-btn-secondary">Zurück</a>
</div>
{% endblock %}