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

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

{% if booked_drink %}
    <div class="toast" role="status">
        Gebucht: +1 {{ booked_drink.name }}{% if booked_free %} (gratis){% elif is_anonymous_target %} (bar bezahlt){% endif %}
    </div>
{% endif %}

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

{% if is_anonymous_target %}
    <p class="muted">Anonyme Buchungen werden automatisch als bar bezahlt eingetragen.</p>
{% else %}
    <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">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:staff_pay' tab_user.username %}" class="btn-primary">Zahlung eintragen</a></p>
{% endif %}

{% if phase == "booking" %}
    <section>
        <h3>Getränk buchen</h3>
        <form method="post" action="{% url 'suff:staff_book' tab_user.username %}">
            {% csrf_token %}
            <label class="for-free-toggle">
                <input type="radio" name="booking_mode" value="for_free" />
                <span>Gratis (z.B. Artists am Spieltag)</span>
            </label>
            <label class="for-free-toggle">
                <input type="radio" name="booking_mode" value="cash_paid" />
                <span>Direkt bar bezahlt</span>
            </label>
            <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:staff_delete_consumption' tab_user.username 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>

<div class="link-row">
    {% if not is_anonymous_target %}
        <a href="{% url 'suff:staff_pin_reset' tab_user.username %}" class="link-btn link-btn-secondary">PIN setzen / zurücksetzen</a>
    {% endif %}
    <a href="{% url 'suff:staff_index' %}" class="link-btn link-btn-secondary">Anderen Benutzer wählen</a>
    <a href="{% url 'suff:me' %}" class="link-btn link-btn-secondary">Zurück zu mir</a>
</div>
{% endblock %}