{% if session['theme'] == 'darkmode' %}
    {% extends "base_dark.html" %}
{% else %}
    {% extends "base.html" %}
{% endif %}

{% block title %}Events{% endblock %}

{% block content %}
<style>
    .events-flex-row {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        margin-top: 40px;
        flex-wrap: nowrap;
    }
    .events-flex-row .form-container {
        margin: 0;
        min-width: 320px;
        max-width: 400px;
        flex: 1 1 320px;
    }
    .events-back-btn-row {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .events-form-light button[type="submit"] {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: bold;
        border: 2px solid #007BFF;
        color: #007BFF;
        background: transparent;
        cursor: pointer;
        border-radius: 6px;
        margin-top: 16px;
        margin-bottom: 10px;
        transition: background 0.2s, color 0.2s;
    }
    .events-form-light button[type="submit"]:hover {
        background: #007BFF;
        color: #fff;
    }
    .events-back-btn-light {
        min-width: 150px;
        text-align: center;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: bold;
        border: 2px solid #007BFF;
        color: #007BFF;
        background: transparent;
        border-radius: 6px;
        margin-top: 10px;
        transition: background 0.2s, color 0.2s;
        display: inline-block;
    }
    .events-back-btn-light:hover {
        background: #007BFF;
        color: #fff;
    }
    .events-back-btn-dark {
        width: auto;
        min-width: unset;
        max-width: unset;
        padding: 14px 28px;
        display: inline-block;
        text-align: center;
    }
</style>
{% if session['theme'] == 'darkmode' %}
<div>
    <div class="events-flex-row">
        <div class="form-container">
            <h2>Event hinzufügen</h2>
            <form action="{{ url_for('events') }}" method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <label for="event_name">Event Name:</label>
                <input type="text" id="event_name" name="event_name" required>
                <label for="community_feedback">Hat es der Community gefallen?</label>
                <select id="community_feedback" name="community_feedback" required>
                    <option value="top">Ja</option>
                    <option value="flop">Nein</option>
                    <option value="etwas">Teilweise</option>
                </select>
                <label for="players">Spieleranzahl:</label>
                <input type="number" id="players" name="players" required>
                <label for="time">Uhrzeit:</label>
                <input type="time" id="time" name="time" required>
                <label for="weekday">Wochentag:</label>
                <select id="weekday" name="weekday" required>
                    <option value="Montag">Montag</option>
                    <option value="Dienstag">Dienstag</option>
                    <option value="Mittwoch">Mittwoch</option>
                    <option value="Donnerstag">Donnerstag</option>
                    <option value="Freitag">Freitag</option>
                    <option value="Samstag">Samstag</option>
                    <option value="Sonntag">Sonntag</option>
                </select>
                <button type="submit" class="neon-button neon1"><span>Event hinzufügen</span></button>
            </form>
        </div>
        <div class="form-container">
            <h2>Bestes Event berechnen</h2>
            <form action="{{ url_for('events') }}" method="get">
                <label for="current_players">Aktuelle Spieler:</label>
                <input type="number" id="current_players" name="current_players" required>
                <label for="current_time">Aktuelle Uhrzeit:</label>
                <input type="time" id="current_time" name="current_time" required>
                <label for="current_weekday">Aktueller Wochentag:</label>
                <select id="current_weekday" name="current_weekday" required>
                    <option value="Montag">Montag</option>
                    <option value="Dienstag">Dienstag</option>
                    <option value="Mittwoch">Mittwoch</option>
                    <option value="Donnerstag">Donnerstag</option>
                    <option value="Freitag">Freitag</option>
                    <option value="Samstag">Samstag</option>
                    <option value="Sonntag">Sonntag</option>
                </select>
                <button type="submit" name="calculate_best" value="1" id="calculateBestEvent" class="neon-button neon2"><span>Bestes Event berechnen</span></button>
            </form>
            {% if best_events %}
                <h2>Top 5 Events</h2>
                <div id="barChartContainer" style="width:100%;height:260px;display:flex;align-items:end;justify-content:space-around;gap:10px;margin-top:30px;">
                </div>
                <script>
                    const bestEvents = {{ best_events|tojson }};
                    const colors = ["#00fff7", "#ff00ff", "#39ff14", "#ffb300", "#ff4d4d"];
                    function animateBars() {
                        const maxRating = Math.max(...bestEvents.map(e => e.rating));
                        const container = document.getElementById('barChartContainer');
                        container.innerHTML = '';
                        bestEvents.forEach((event, idx) => {
                            const bar = document.createElement('div');
                            bar.style.height = '0px';
                            bar.style.width = '60px';
                            bar.style.background = colors[idx % colors.length];
                            bar.style.borderRadius = '8px 8px 0 0';
                            bar.style.display = 'flex';
                            bar.style.flexDirection = 'column';
                            bar.style.alignItems = 'center';
                            bar.style.justifyContent = 'flex-end';
                            bar.style.transition = 'height 1s cubic-bezier(.68,-0.55,.27,1.55)';
                            bar.style.position = 'relative';

                            const label = document.createElement('div');
                            label.innerText = event.name;
                            label.style.position = 'absolute';
                            label.style.bottom = '-32px';
                            label.style.width = '100%';
                            label.style.textAlign = 'center';
                            label.style.fontSize = '13px';
                            label.style.color = '#fff';
                            label.style.wordBreak = 'break-word';

                            const value = document.createElement('div');
                            value.innerText = event.rating;
                            value.style.position = 'absolute';
                            value.style.top = '-28px';
                            value.style.width = '100%';
                            value.style.textAlign = 'center';
                            value.style.fontWeight = 'bold';
                            value.style.fontSize = '15px';
                            value.style.color = '#fff';

                            bar.appendChild(label);
                            bar.appendChild(value);
                            container.appendChild(bar);

                            setTimeout(() => {
                                bar.style.height = (event.rating / (maxRating || 1) * 180 + 30) + 'px';
                            }, 100 + idx * 120);
                        });
                    }
                    window.addEventListener('DOMContentLoaded', animateBars);
                </script>
            {% elif best_event %}
                <h2>Bestes Event</h2>
                <p>{{ best_event.name }} - Rating: {{ best_event.rating }} (Top: {{ best_event.top }}, Flop: {{ best_event.flop }})</p>
            {% endif %}
        </div>
        <div class="form-container">
            <h2>Protokollierte Events</h2>
            <ul style="list-style-type: none; padding: 0;">
                {% set event_names = [] %}
                {% for event in events %}
                    {% if event.name not in event_names %}
                        <li style="background: rgba(255,255,255,0.35); margin: 5px 0; padding: 10px; border-radius: 4px;">{{ event.name }}</li>
                        {% set event_names = event_names.append(event.name) %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="events-back-btn-row">
        <a href="javascript:window.history.back()" class="neon-button neon3 events-back-btn-dark"><span>Zurück</span></a>
    </div>
</div>
{% else %}
<div>
    <div class="events-flex-row">
        <div class="form-container">
            <h2>Event hinzufügen</h2>
            <form action="{{ url_for('events') }}" method="post" class="events-form-light">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <label for="event_name">Event Name:</label>
                <input type="text" id="event_name" name="event_name" required>
                <label for="community_feedback">Hat es der Community gefallen?</label>
                <select id="community_feedback" name="community_feedback" required>
                    <option value="top">Ja</option>
                    <option value="flop">Nein</option>
                    <option value="etwas">Teilweise</option>
                </select>
                <label for="players">Spieleranzahl:</label>
                <input type="number" id="players" name="players" required>
                <label for="time">Uhrzeit:</label>
                <input type="time" id="time" name="time" required>
                <label for="weekday">Wochentag:</label>
                <select id="weekday" name="weekday" required>
                    <option value="Montag">Montag</option>
                    <option value="Dienstag">Dienstag</option>
                    <option value="Mittwoch">Mittwoch</option>
                    <option value="Donnerstag">Donnerstag</option>
                    <option value="Freitag">Freitag</option>
                    <option value="Samstag">Samstag</option>
                    <option value="Sonntag">Sonntag</option>
                </select>
                <button type="submit">Event hinzufügen</button>
            </form>
        </div>
        <div class="form-container">
            <h2>Bestes Event berechnen</h2>
            <form action="{{ url_for('events') }}" method="get" class="events-form-light">
                <label for="current_players">Aktuelle Spieler:</label>
                <input type="number" id="current_players" name="current_players" required>
                <label for="current_time">Aktuelle Uhrzeit:</label>
                <input type="time" id="current_time" name="current_time" required>
                <label for="current_weekday">Aktueller Wochentag:</label>
                <select id="current_weekday" name="current_weekday" required>
                    <option value="Montag">Montag</option>
                    <option value="Dienstag">Dienstag</option>
                    <option value="Mittwoch">Mittwoch</option>
                    <option value="Donnerstag">Donnerstag</option>
                    <option value="Freitag">Freitag</option>
                    <option value="Samstag">Samstag</option>
                    <option value="Sonntag">Sonntag</option>
                </select>
                <button type="submit" name="calculate_best" value="1" id="calculateBestEvent">Bestes Event berechnen</button>
            </form>
            {% if best_events %}
                <h2>Top 5 Events</h2>
                <div id="barChartContainer" style="width:100%;height:260px;display:flex;align-items:end;justify-content:space-around;gap:10px;margin-top:30px;">
                </div>
                <script>
                    const bestEvents = {{ best_events|tojson }};
                    const colors = ["#00fff7", "#ff00ff", "#39ff14", "#ffb300", "#ff4d4d"];
                    function animateBars() {
                        const maxRating = Math.max(...bestEvents.map(e => e.rating));
                        const container = document.getElementById('barChartContainer');
                        container.innerHTML = '';
                        bestEvents.forEach((event, idx) => {
                            const bar = document.createElement('div');
                            bar.style.height = '0px';
                            bar.style.width = '60px';
                            bar.style.background = colors[idx % colors.length];
                            bar.style.borderRadius = '8px 8px 0 0';
                            bar.style.display = 'flex';
                            bar.style.flexDirection = 'column';
                            bar.style.alignItems = 'center';
                            bar.style.justifyContent = 'flex-end';
                            bar.style.transition = 'height 1s cubic-bezier(.68,-0.55,.27,1.55)';
                            bar.style.position = 'relative';

                            const label = document.createElement('div');
                            label.innerText = event.name;
                            label.style.position = 'absolute';
                            label.style.bottom = '-32px';
                            label.style.width = '100%';
                            label.style.textAlign = 'center';
                            label.style.fontSize = '13px';
                            label.style.color = '#fff';
                            label.style.wordBreak = 'break-word';

                            const value = document.createElement('div');
                            value.innerText = event.rating;
                            value.style.position = 'absolute';
                            value.style.top = '-28px';
                            value.style.width = '100%';
                            value.style.textAlign = 'center';
                            value.style.fontWeight = 'bold';
                            value.style.fontSize = '15px';
                            value.style.color = '#fff';

                            bar.appendChild(label);
                            bar.appendChild(value);
                            container.appendChild(bar);

                            setTimeout(() => {
                                bar.style.height = (event.rating / (maxRating || 1) * 180 + 30) + 'px';
                            }, 100 + idx * 120);
                        });
                    }
                    window.addEventListener('DOMContentLoaded', animateBars);
                </script>
            {% elif best_event %}
                <h2>Bestes Event</h2>
                <p>{{ best_event.name }} - Rating: {{ best_event.rating }} (Top: {{ best_event.top }}, Flop: {{ best_event.flop }})</p>
            {% endif %}
        </div>
        <div class="form-container">
            <h2>Protokollierte Events</h2>
            <ul style="list-style-type: none; padding: 0;">
                {% set event_names = [] %}
                {% for event in events %}
                    {% if event.name not in event_names %}
                        <li style="background: rgba(255,255,255,0.5); margin: 5px 0; padding: 10px; border-radius: 4px;">{{ event.name }}</li>
                        {% set event_names = event_names.append(event.name) %}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="events-back-btn-row">
        <a href="javascript:window.history.back()" class="events-back-btn-light">Zurück</a>
    </div>
</div>
{% endif %}
{% endblock %}