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

{% block content %}
<h2>Hallo {{ tab_user.username }}</h2>

<p class="intro">
    Tipp dich rein, sobald du was trinkst. Am Ende deines Besuchs kannst du
    alles zusammen mit deiner <strong>Eintrittsspende</strong> bezahlen –
    bar oder per PayPal.
</p>

{% if booked_drink %}
    <div class="toast" role="status">
        Gebucht: +1 {{ booked_drink.name }}
    </div>
{% endif %}

{% if paid_toast %}
    <div class="toast" role="status">
        Zahlung gespeichert. Danke!
    </div>
{% endif %}

<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>
        <span class="total-label">Offen</span>
        <span class="total-value">{{ open_balance|floatformat:2 }} €</span>
    {% endif %}
</section>

<p><a href="{% url 'suff:pay' %}" class="btn-primary">Für Drinks und Eintritt spenden</a></p>

{% if phase == "booking" %}
    <section>
        <h3>Neues Getränk buchen</h3>
        <div class="drink-grid">
            {% for drink in drinks %}
                <form method="post" action="{% url 'suff:book' %}">
                    {% csrf_token %}
                    <input type="hidden" name="drink_id" value="{{ drink.id }}" />
                    <button type="submit" class="drink-btn drink-btn-{{ drink.category }}">
                        <span class="drink-plus">+1</span>
                        <span class="drink-name">{{ drink.name }}</span>
                        <span class="drink-price">{{ drink.sale_price_per_bottle|floatformat:2 }} €</span>
                    </button>
                </form>
            {% endfor %}
        </div>
    </section>
{% endif %}

<section>
    <h3>Bisher gebucht</h3>
    {% if consumption_list %}
        {% regroup consumption_list by get_day_display as day_groups %}
        {% for group in day_groups %}
            <div class="day-group">
                <h4 class="day-heading">{{ group.grouper }}</h4>
                <ul class="history">
                    {% for c in group.list %}
                        <li>
                            <span class="hist-when">{% if c.created_at %}{{ c.created_at|date:"H:i" }}{% else %}—{% endif %}</span>
                            <span class="hist-what">{{ c.drink.name }}</span>
                            <span class="hist-price">
                                {% if c.for_free %}gratis{% else %}{{ c.drink.sale_price_per_bottle|floatformat:2 }} €{% endif %}
                            </span>
                            {% if phase == "booking" %}
                                <a href="{% url 'suff:delete_consumption' c.id %}" class="hist-delete" aria-label="Buchung löschen">🗑</a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <p class="empty-emoji">🍺</p>
            <p>Noch nichts gebucht.</p>
            {% if phase == "booking" %}<p class="muted">Tipp dich rein, sobald du was trinkst!</p>{% endif %}
        </div>
    {% endif %}
</section>

{% if request.user.is_staff %}
    <div class="link-row">
        <a href="{% url 'suff:staff_index' %}" class="link-btn link-btn-secondary">Crew: Buchen für andere</a>
        <a href="{% url 'suff:dashboard' %}" class="link-btn link-btn-secondary">Crew: Dashboard</a>
    </div>
{% endif %}

<form method="post" action="{% url 'suff:logout' %}" class="logout-form">
    {% csrf_token %}
    <button type="submit" class="btn-secondary">Logout</button>
</form>
{% endblock %}