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

{% block content %}
<p class="muted">Crew-Ansicht</p>
<h2>Zahlung für <span class="staff-target">{{ tab_user.username }}</span></h2>

<section class="total-box">
    <span class="total-label">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:staff_pay' tab_user.username %}" 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>
                    {% if phase == "booking" %}
                        <a href="{% url 'suff:staff_delete_payment' tab_user.username 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:staff_user' tab_user.username %}" class="link-btn link-btn-secondary">Zurück</a>
</div>
{% endblock %}