{% extends "base.html" %} {% block title %}Startseite{% 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 '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 %}
{% if last_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.drink_type|lower|replace(' ', '_') }}.png" 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_drink.drink_type }}<br>
            Zeit: <span class="local-timestamp" data-utc="{{ last_drink.timestamp }}">{{ last_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>
            ID: {{ last_drink.id }}
        </div>
        <form method="post" action="/del_last_drink" style="display: inline;">
            <input type="hidden" name="drink_id" value="{{ last_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 %}

{% 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 %}
<div id="popup" style="display:none; position:fixed; top:25%; left:50%; transform:translate(-50%, -25%);
     background:#fff; border:2px solid #00618F; border-radius:12px; padding:1em; box-shadow:0 0 20px rgba(0,0,0,0.3); z-index:1000; max-width:90%; text-align:center;">
    <h2>Wähle dein Getränk oder warte bitte</h2>
    <div id="popup-getraenke" style="margin: 1em 0;"></div>
    <div id="progress-container" style="height:10px; background:#ccc; border-radius:5px; overflow:hidden;">
        <div id="progress-bar" style="height:10px; background:#00618F; width:100%; transition: width 0.1s linear;"></div>
    </div>
</div>

<script>
    async function showDrinkPopup() {
        const response = await fetch("/popup_getraenke");
        const data = await response.json();
        const container = document.getElementById("popup-getraenke");
        container.innerHTML = "";

        data.getraenke.forEach(name => {
            const btn = document.createElement("button");
            btn.textContent = name;
            btn.style.margin = "0.5em";
            btn.style.padding = "0.5em 1em";
            btn.style.borderRadius = "6px";
            btn.style.border = "1px solid #00618F";
            btn.style.background = "#e0f4ff";
            btn.style.cursor = "pointer";
            btn.onclick = () => {
                document.getElementById("getraenk-auswahl").value = name;
                document.getElementById("popup").style.display = "none";
                document.getElementById("drink-form").submit();
            };
            container.appendChild(btn);
        });

        document.getElementById("popup").style.display = "block";

        let dauer = 3; // Sekunden
        let verbleibend = dauer;
        const bar = document.getElementById("progress-bar");
        bar.style.width = "100%";

        const interval = setInterval(() => {
            verbleibend -= 0.1;
            bar.style.width = (verbleibend / dauer * 100) + "%";
            if (verbleibend <= 0) {
                clearInterval(interval);
                const auswahlInput = document.getElementById("getraenk-auswahl");
                if (auswahlInput) {
                    auswahlInput.value = "";
                }
                document.getElementById("popup").style.display = "none";
                const drinkForm = document.getElementById("drink-form");
                if (drinkForm) {
                    drinkForm.submit();
                }
            }
        }, 100);
        console.log("Popup angezeigt und Fortschrittsbalken gestartet.");
    }
</script>

{% endblock %}
