{% extends "base.html" %} {% block title %}Getränkeliste{% endblock %} {% block
content %}
<h2>Willkommen, {{ user.name }}!</h2>
<p><strong>Aktueller Kontostand:</strong></p>
{% if db_user.money > -5000 %}
<div
    style="
        text-align: center;
        font-size: 2em;
        color: var(--goetheblau);
        margin: 0.5em 0;
    "
>
    {{ db_user.money / 100 }} Euro
</div>
{% else %}
<div
    style="
        text-align: center;
        font-size: 2em;
        color: var(--purple);
        margin: 0.5em 0;
        font-weight: bold;
    "
>
    {{ db_user.money / 100 }} Euro
    <br />
    <span style="color: var(--goetheblau); font-weight: normal; font-size: 1em">
        Bitte begleiche deinen offenen Betrag!
    </span>
</div>
{% endif %}
{% if last_recent_drink %}
    <div style="margin: 1em 0; text-align: center;">
        <strong>Getränk spezialisieren:</strong>
        <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; margin-top: 1em;">
            {% for drink in avail_drink_types %}
                <form method="post" action="/update_drink_post" style="display: inline-block;">
                    <input type="hidden" name="drink_type" value="{{ drink.drink_type }}">
                    <button type="submit"
                        style="display: flex; flex-direction: column; align-items: center; background-color: var(--goetheblau); color: #fff; border: none; border-radius: 8px; padding: 0.7em 1.2em; cursor: pointer; min-width: 120px;">
                        <img src="/static/drinks/{{ drink.icon }}" alt="{{ drink.drink_type }}" style="width:48px; height:48px; object-fit:contain; margin-bottom:0.5em;">
                        <span>{{ drink.drink_type }}</span>
                        {% if drink.count > 0 %}
                            <span style="font-size:0.9em; color:#eee;">x{{ drink.count }}</span>
                        {% endif %}
                    </button>
                </form>
            {% endfor %}
        </div>
    </div>

    <div style="margin: 1em 0; text-align: center;">
        <strong>Letztes Getränk:</strong>
        <div style="margin: 0.5em 0;">
            Typ: {{ last_recent_drink.drink_type_name }}<br>
            Zeit: <span class="local-timestamp" data-utc="{{ last_recent_drink.timestamp }}">{{ last_recent_drink.timestamp }}</span><br>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    document.querySelectorAll('.local-timestamp').forEach(function(el) {
                        const utc = el.getAttribute('data-utc');
                        if (utc) {
                            const date = new Date(utc);
                            el.textContent = date.toLocaleString();
                        }
                    });
                });
            </script>
        </div>
        <form method="post" action="/del_last_drink" style="display: inline;">
            <input type="hidden" name="drink_id" value="{{ last_recent_drink.drink_id }}">
            <button type="submit"
                style="background-color: var(--emorot); color: #fff; border: none; border-radius: 6px; padding: 0.5em 1em; cursor: pointer;">
                Getränk löschen
            </button>
        </form>
    </div>
{% endif %}
{% if 'Getraenkeliste Postpaid' in user.groups %} {% if db_user.money > -5000 %}
<div style="display: flex; justify-content: center; text-align: center">
    <form method="post" action="/drink">
        <button
            type="submit"
            style="
                background-color: rgb(165, 171, 82);
                color: rgb(255, 255, 255);
                font-size: 1.5em;
                padding: 0.75em 2em;
                border: none;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
                cursor: pointer;
                transition: background 0.2s;
            "
        >
            Getränk abziehen
        </button>
    </form>
</div>
{% else %}
<div style="display: flex; justify-content: center; text-align: center">
    <form method="post" action="/drink">
        <button
            type="submit"
            style="
                background-color: var(--emorot);
                color: rgb(255, 255, 255);
                font-size: 1.5em;
                padding: 0.75em 2em;
                border: none;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
                cursor: pointer;
                transition: background 0.2s;
            "
        >
            Getränk abziehen
        </button>
    </form>
</div>
{% endif %}

{% endif %}

{% if user.prepaid %}
<div style="display: flex; justify-content: center; text-align: center">
    <form method="post" action="/drink_prepaid">
        <button
            type="submit"
            style="
                background-color: rgb(165, 171, 82);
                color: rgb(255, 255, 255);
                font-size: 1.5em;
                padding: 0.75em 2em;
                border: none;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
                cursor: pointer;
                transition: background 0.2s;
            "
        >
            Getränk abziehen
        </button>
    </form>
</div>
<p>Deine aktuelle Ansprechperson ist:</p>
<div
    style="
        text-align: center;
        font-size: 2em;
        color: var(--goetheblau);
        margin: 0.5em 0;
    "
>
    ID {{ db_user.postpaid_user_id }}
</div>
{% endif %}

{% if last_regular_drink %}
    <div style="margin: 1em 0; text-align: center;">
        <strong>Letztes Getränk:</strong>
        <div style="margin: 0.5em 0;">
            Typ: {{ last_regular_drink.drink_type_name }}<br>
            Zeit: <span class="local-timestamp" data-utc="{{ last_regular_drink.timestamp }}">{{ last_regular_drink.timestamp }}</span><br>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    document.querySelectorAll('.local-timestamp').forEach(function(el) {
                        const utc = el.getAttribute('data-utc');
                        if (utc) {
                            const date = new Date(utc);
                            el.textContent = date.toLocaleString();
                        }
                    });
                });
            </script>
        </div>
    </div>
{% else %}
    <div style="margin: 1em 0; text-align: center;">
        <strong>Letztes Getränk:</strong>
        <div style="margin: 0.5em 0;">Kein Getränk in den letzten 3 Monaten.</div>
    </div>
{% endif %}

{% if most_used_drinks %}
    <h3>Meistgenutzte Getränke:</h3>
    <ul style="list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1em; justify-content: center;">
        {% for drink in most_used_drinks %}
            <li style="text-align: center;">
                <img src="/static/drinks/{{ drink.icon }}" alt="{{ drink.drink_type }}" style="width:48px; height:48px; object-fit:contain;"><br>
                {{ drink.drink_type }} ({{ drink.count }})
            </li>
        {% endfor %}
    </ul>
{% endif %}

{% if user %}
    {% if 'Getraenkeliste Postpaid' in user.groups %}
        {% if prepaid_users_from_curr_user %}
            <p>Liste deiner Prepaid-User:</p>
            <table>
                <thead>
                    <tr>
                        <th style="padding: 0.5em 1em">Username</th>
                        <th style="padding: 0.5em 1em">Key</th>
                        <th style="padding: 0.5em 1em">Money (€)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for prepaid_user_i in prepaid_users_from_curr_user %}
                        <tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
        <p>Füge Nutzer zur Prepaid Liste hinzu:</p>
        <form method="post" action="/add_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
            <input id="username" type="text" name="username" placeholder="Username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
            <label for="start_money" style="margin: 0 0.5em 0 0; font-weight: bold">Start Money (€):</label>
            <input id="start_money" type="number" name="start_money" placeholder="Start Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add User</button>
        </form>
        <p>Füge bestehendem Prepaid-User Geld hinzu:</p>
        {% if db_users_prepaid %}
            <form method="post" action="/add_money_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                <label for="addmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                <select id="addmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                    {% for db_user in db_users_prepaid %}
                        <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                    {% endfor %}
                </select>
                <label for="addmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
                <input id="addmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
                <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add Money</button>
            </form>
        {% else %}
            <p>Es sind keine Prepaid-User vorhanden.</p>
        {% endif %}
    {% endif %}
    {% if 'Getraenkeliste Verantwortliche' in user.groups %}
        <h2>Admin Interface</h2>
        <p>Ausgleichszahlung:</p>
        <p>Der eingegebene Betrag wird vom aktuell eingeloggten Nutzer abgezogen und dem eingetragenem Nutzer gutgeschrieben.</p>
        <form method="post" action="/payup" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="payup-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
            <select id="payup-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                {% for db_user in users %}
                    <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                {% endfor %}
            </select>
            <label for="payup-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
            <input id="payup-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Pay Up</button>
        </form>
        <h3>Postpaid Liste</h3>
        <p>Users in postpaid database:</p>
        <table>
            <thead>
                <tr>
                    <th style="padding: 0.5em 1em">ID</th>
                    <th style="padding: 0.5em 1em">Username</th>
                    <th style="padding: 0.5em 1em">Money (€)</th>
                    <th style="padding: 0.5em 1em">Activated</th>
                    <th style="padding: 0.5em 1em">last drink</th>
                </tr>
            </thead>
            <tbody>
                {% for db_user_i in users %}
                    <tr{% if db_user_i.money <= -5000 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                        <td style="padding: 0.5em 1em">{{ db_user_i.id }}</td>
                        <td style="padding: 0.5em 1em">{{ db_user_i.username }}</td>
                        <td style="padding: 0.5em 1em">{{ db_user_i.money / 100 }}</td>
                        <td style="padding: 0.5em 1em">{{ db_user_i.activated }}</td>
                        <td style="padding: 0.5em 1em">{{ db_user_i.last_drink }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <p>(De-)Activate User</p>
        <form method="post" action="/toggle_activated_user_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
            <select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                {% for db_user in users %}
                    <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                {% endfor %}
            </select>
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
        </form>
        <p>Set user money:</p>
        <form method="post" action="/set_money_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="setmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
            <select id="setmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                {% for db_user in users %}
                    <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                {% endfor %}
            </select>
            <label for="setmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
            <input id="setmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Set Money</button>
        </form>
        <h3>Prepaid Liste</h3>
        <p>Users in prepaid database:</p>
        {% if db_users_prepaid %}
            <table>
                <thead>
                    <tr>
                        <th style="padding: 0.5em 1em">ID</th>
                        <th style="padding: 0.5em 1em">Username</th>
                        <th style="padding: 0.5em 1em">Key</th>
                        <th style="padding: 0.5em 1em">Postpaid_User ID</th>
                        <th style="padding: 0.5em 1em">Money (€)</th>
                        <th style="padding: 0.5em 1em">Activated</th>
                        <th style="padding: 0.5em 1em">last drink</th>
                    </tr>
                </thead>
                <tbody>
                    {% for prepaid_user_i in db_users_prepaid %}
                        <tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.id }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.postpaid_user_id }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.activated }}</td>
                            <td style="padding: 0.5em 1em">{{ prepaid_user_i.last_drink }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p>(De-)Activate User</p>
            <form method="post" action="/toggle_activated_user_prepaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                <label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                <select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                    {% for db_user in db_users_prepaid %}
                        <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                    {% endfor %}
                </select>
                <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
            </form>
            <p>Delete User</p>
            <form method="post" action="/del_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                <label for="del-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                <select id="del-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                    {% for db_user in db_users_prepaid %}
                        <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                    {% endfor %}
                </select>
                <button type="submit" style="padding: 0.5em 1em; background: rgb(179, 6, 44); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Delete User</button>
            </form>
        {% else %}
            <tr>
                <td colspan="7" style="text-align: center">No users in prepaid database</td>
            </tr>
        {% endif %}

        <h3>Getränkesorten</h3>
        <p>Verfügbare Getränkesorten:</p>
        {% if drink_types %}
            <table>
                <thead>
                    <tr>
                        <th style="padding: 0.5em 1em">ID</th>
                        <th style="padding: 0.5em 1em">Name</th>
                        <th style="padding: 0.5em 1em">Icon</th>
                        <th style="padding: 0.5em 1em">Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    {% for drink_type in drink_types %}
                        <td style="padding: 0.5em 1em">{{ drink_type[0] }}</td>
                        <td style="padding: 0.5em 1em">{{ drink_type[1] }}</td>
                        <td style="padding: 0.5em 1em">{{ drink_type[2] }}</td>
                        <td style="padding: 0.5em 1em">{{ drink_type[3] }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>Keine Getränkesorten vorhanden.</p>
        {% endif %}
        <p>Füge Getränkesorte hinzu:</p>
        <form method="post" action="/add_drink_type" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="drink_type_name" style="margin: 0 0.5em 0 0; font-weight: bold">Name:</label>
            <input id="drink_type_name" type="text" name="drink_type_name" placeholder="Drink Type Name" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
            <label for="drink_type_icon" style="margin: 0 0.5em 0 0; font-weight: bold">Icon:</label>
            <input id="drink_type_icon" type="text" name="drink_type_icon" placeholder="Drink Type Icon" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add Drink Type</button>
        </form>
        <p>Setze Menge der Getränkesorte:</p>
        <form method="post" action="/set_drink_type_quantity" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
            <label for="drink_type_select" style="margin: 0 0.5em 0 0; font-weight: bold">Getränkesorte:</label>
            <select id="drink_type_select" name="drink_type_name" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                {% for drink_type in drink_types %}
                    <option value="{{ drink_type[1] }}">{{ drink_type[1] }}</option>
                {% endfor %}
            </select>
            <label for="drink_type_quantity" style="margin: 0 0.5em 0 0; font-weight: bold">Menge:</label>
            <input id="drink_type_quantity" type="number" name="quantity" min="0" step="1" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
            <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Setzen</button>
        </form>
        
    {% endif %}
{% endif %}

{% endblock %}