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

{% block content %}
<h2>Hallo <span class="self-username">{{ tab_user.username }}</span></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 {% if paid and open_balance <= 0 %}total-box-settled{% endif %}">
    {% if paid and open_balance <= 0 %}
        <span class="total-settled">Bezahlt ✓</span>
        <div class="total-breakdown">
            <span>Drinks {{ total|floatformat:2 }} €</span>
            <span>·</span>
            <span>Bezahlt {{ paid|floatformat:2 }} €</span>
            <span>·</span>
            {% if open_balance < 0 %}
                <span>Spende {{ open_balance|floatformat:2|slice:"1:" }} €</span>
            {% else %}
                <span>Genau bezahlt</span>
            {% endif %}
        </div>
    {% else %}
        <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 %}
    {% 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>
        <form method="post" action="{% url 'suff:book' %}">
            {% csrf_token %}
            <label class="for-free-toggle">
                <input type="checkbox" name="booking_mode" value="for_free" />
                <span>Gratis (z.B. Artists am Spieltag)</span>
            </label>
            <label class="for-free-toggle">
                <input type="checkbox" name="booking_mode" value="cash_paid" />
                <span>Direkt bar bezahlt</span>
            </label>
            <script>
            document.querySelectorAll('input[name="booking_mode"]').forEach(function(cb) {
                cb.addEventListener('change', function() {
                    if (this.checked) {
                        document.querySelectorAll('input[name="booking_mode"]').forEach(function(other) {
                            if (other !== cb) other.checked = false;
                        });
                    }
                });
            });
            </script>
            <div class="drink-grid">
                {% for drink in drinks %}
                    <button type="submit" name="drink_id" value="{{ drink.id }}" 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>
                {% endfor %}
            </div>
        </form>
    </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>
        </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 %}

<div class="bottom-actions">
    <a href="{% url 'suff:change_pin' %}" class="btn-secondary btn-secondary-link">PIN ändern</a>
    <form method="post" action="{% url 'suff:logout' %}">
        {% csrf_token %}
        <button type="submit" class="btn-secondary">Logout</button>
    </form>
</div>
{% endblock %}