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

{% block title %}Termin Planer{% endblock %}

{% block content %}
<div class="content-wrapper">
    <div class="form-container" style="max-width: 1000px; padding: 30px;">
        <h2>Termin Planer</h2>
        <div id="calendar" style="margin-top: 20px;">
            <table style="width: 100%; border-collapse: collapse; text-align: center;">
                <thead>
                    <tr>
                        <th style="padding: 10px; border: 1px solid #ddd;">Montag</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Dienstag</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Mittwoch</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Donnerstag</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Freitag</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Samstag</th>
                        <th style="padding: 10px; border: 1px solid #ddd;">Sonntag</th>
                    </tr>
                </thead>
                <tbody>
                    {% for week in calendar %}
                    <tr>
                        {% for day in week %}
                        <td style="padding: 10px; border: 1px solid #ddd; vertical-align: top;">
                            <strong>{{ day.date }}</strong>
                            <ul style="list-style: none; padding: 0; margin: 10px 0;">
                                {% for event in day.events %}
                                <li>{{ event.time }} - {{ event.player }}: {{ event.description }} (Für: {{ event.assigned_to }})</li>
                                {% endfor %}
                            </ul>
                            <button onclick="openEventModal('{{ day.date }}')" style="margin-top: 10px;">+ Termin</button>
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="eventModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 1000;">
    <h3>Neuen Termin hinzufügen</h3>
    <form method="POST" action="{{ url_for('appointment_scheduler') }}">
        <input type="hidden" name="date" id="eventDate">
        <label for="time">Uhrzeit:</label>
        <input type="time" name="time" id="time" required>
        <br>
        <label for="player">Spieler:</label>
        <input type="text" name="player" id="player" required>
        <br>
        <label for="description">Beschreibung:</label>
        <input type="text" name="description" id="description" required>
        <br>
        <label for="assigned_to">Für:</label>
        <input type="text" name="assigned_to" id="assigned_to" required>
        <br>
        <button type="submit" style="margin-top: 10px;">Speichern</button>
        <button type="button" onclick="closeEventModal()" style="margin-top: 10px;">Abbrechen</button>
    </form>
</div>

<script>
    function openEventModal(date) {
        document.getElementById('eventDate').value = date;
        document.getElementById('eventModal').style.display = 'block';
    }

    function closeEventModal() {
        document.getElementById('eventModal').style.display = 'none';
    }
</script>
{% endblock %}