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

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

{% block content %}
<div class="calendar-wrapper" style="max-width: 1200px; margin: 30px auto; display: flex; gap: 20px;">
    <div class="calendar-container" style="flex: 1; background: {% if session['theme'] == 'lightmode' %}#f0f0f0{% else %}#323232{% endif %}; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);">
        <h2 style="margin-bottom: 20px;">📅 Termin Planer</h2>
        <div class="calendar-navigation" style="margin: 20px 0;">
            <button onclick="navigateMonth(-1)" class="neon-button neon1"><span>⬅️ Vorheriger Monat</span></button>
            <span id="currentMonth" style="margin: 0 20px; font-size: 18px; font-weight: bold;"></span>
            <button onclick="navigateMonth(1)" class="neon-button neon1"><span>➡️ Nächster Monat</span></button>
        </div>
        <div id="calendar" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center;">
        </div>
        <div style="margin-top: 20px;">
            <a href="{{ url_for('dashboard') }}" class="neon-button neon2"><span>🔙 Zurück zum Dashboard</span></a>
        </div>
    </div>

    <div class="appointments-container" style="flex: 1; background: {% if session['theme'] == 'lightmode' %}#ffffff{% else %}#2c2c2c{% endif %}; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);">
        <h2 style="margin-bottom: 20px;">📋 Anstehende Termine</h2>
        {% if appointments %}
            <ul style="list-style: none; padding: 0;">
                {% for appointment in appointments %}
                    <li style="margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; background: {% if session['theme'] == 'lightmode' %}#f9f9f9{% else %}#3a3a3a{% endif %};">
                        <strong>{{ appointment.title }}</strong><br>
                        <small>{{ appointment.start_date }} - {{ appointment.end_date }}</small><br>
                        <span>{{ appointment.description }}</span>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>Keine anstehenden Termine.</p>
        {% endif %}
    </div>
</div>

<<div id="appointmentPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: {% if session['theme'] == 'lightmode' %}#ffffff{% else %}#2c2c2c{% endif %}; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); z-index: 1000; width: 300px;">
    <h3>Termin hinzufügen</h3>
    <form id="appointmentForm" method="POST" action="{{ url_for('appointments') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label for="title">Titel:</label>
        <input type="text" id="title" name="title" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 6px; border: 1px solid #ccc;" required>
        <label for="start_date">Startdatum:</label>
        <input type="date" id="start_date" name="start_date" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 6px; border: 1px solid #ccc;" required>
        <label for="end_date">Enddatum:</label>
        <input type="date" id="end_date" name="end_date" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 6px; border: 1px solid #ccc;" required>
        <label for="description">Beschreibung:</label>
        <textarea id="description" name="description" style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 6px; border: 1px solid #ccc;"></textarea>
        <button type="submit" class="neon-button neon1" style="margin-top: 10px;">Speichern</button>
        <button type="button" onclick="closePopup()" class="neon-button neon3" style="margin-top: 10px;">Abbrechen</button>
    </form>
</div>

<div id="popupOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;" onclick="closePopup()"></div>

<script>
    const calendar = document.getElementById('calendar');
    const currentMonth = document.getElementById('currentMonth');
    const popup = document.getElementById('appointmentPopup');
    const overlay = document.getElementById('popupOverlay');
    let date = new Date();
    const today = new Date();

    function renderCalendar() {
        calendar.innerHTML = '';
        const year = date.getFullYear();
        const month = date.getMonth();
        currentMonth.textContent = date.toLocaleString('default', { month: 'long', year: 'numeric' });

        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();

        for (let i = 0; i < firstDay; i++) {
            calendar.innerHTML += '<div></div>';
        }

        for (let day = 1; day <= daysInMonth; day++) {
            const isToday = today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
            const backgroundColor = isToday
                ? (sessionStorage.getItem('theme') === 'darkmode' ? '#1e3a8a' : '#ffeb3b')
                : 'transparent';
            calendar.innerHTML += `<div style="padding: 10px; border: 1px solid #555; border-radius: 4px; cursor: pointer; background-color: ${backgroundColor};" onclick="openPopup(${day})">${day}</div>`;
        }
    }

    function navigateMonth(offset) {
        date.setMonth(date.getMonth() + offset);
        renderCalendar();
    }

    function openPopup(day) {
        const selectedDate = new Date(date.getFullYear(), date.getMonth(), day);
        document.getElementById('start_date').value = selectedDate.toISOString().split('T')[0];
        document.getElementById('end_date').value = selectedDate.toISOString().split('T')[0];
        popup.style.display = 'block';
        overlay.style.display = 'block';
    }

    function closePopup() {
        popup.style.display = 'none';
        overlay.style.display = 'none';
    }

    renderCalendar();
</script>

<style>
    .neon-button {
        width: auto;
        min-width: 150px;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: bold;
        border: 2px solid;
        color: inherit;
        background: transparent;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 0 8px currentColor, 0 0 14px currentColor inset;
        margin: 10px 0;
        border-radius: 6px;
        text-align: center;
    }

    .neon1 { color: #00fff7; border-color: #00fff7; }
    .neon2 { color: #ff00ff; border-color: #ff00ff; }
    .neon3 { color: #39ff14; border-color: #39ff14; }

    .neon-button::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: currentColor;
        z-index: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: 0.3s ease-in-out;
    }

    .neon-button:hover::before {
        transform: scaleX(1);
    }

    .neon-button span {
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }

    .neon-button:hover span {
        color: #000;
    }
</style>
{% endblock %}