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

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

<p>
    Bitte zahle deinen offenen Betrag mit deiner bevorzugten Methode
    (z.&nbsp;B. Bar an der Kasse oder PayPal an Flo) und trage
    den bezahlten Betrag anschließend hier ein.
</p>

<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>

<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</span>
    <span class="total-value">{{ open_balance|floatformat:2 }} €</span>
</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="number" name="amount" step="0.01" min="0.01"
               value="{{ open_balance|floatformat:2 }}" 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>

{% 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>
                </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 %}