{% extends "base.html" %}

{% block title %}Terminplaner - Inventarsystem{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-11 col-xl-10">
            <section class="p-4 p-md-5 rounded-4 shadow-lg" style="background: linear-gradient(135deg, rgba(15,76,92,0.96), rgba(22,105,122,0.92)); color: #fff;">
                <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-start align-items-lg-end">
                    <div>
                        <p class="text-uppercase fw-semibold mb-2" style="letter-spacing: .12em; opacity: .8;">Terminplaner</p>
                        <h1 class="display-6 fw-bold mb-3">Reservierungen und Termine übersichtlich verwalten</h1>
                        <p class="lead mb-0" style="max-width: 60ch; opacity: .95;">Erstellen Sie neue Terminreihen, teilen Sie Buchungslinks und öffnen Sie den Kalender für bestehende Reservierungen.</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-light btn-lg fw-semibold" href="{{ url_for('terminplaner.configure', tenant=tenant_id) }}">Neue Planung</a>
                        <a class="btn btn-outline-light btn-lg fw-semibold" href="{{ url_for('terminplan', tenant=tenant_id) }}">Kalender öffnen</a>
                    </div>
                </div>
            </section>

            <div class="row g-4 mt-1">
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">🗓️</div>
                            <h2 class="h4 fw-bold">Kalender</h2>
                            <p class="mb-4 text-muted">Sehen Sie vorhandene Termine, ihre Auslastung und die aktuellen Reservierungen im Kalender.</p>
                            <a class="btn btn-primary w-100" href="{{ url_for('terminplan', tenant=tenant_id) }}">Zum Kalender</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">✍️</div>
                            <h2 class="h4 fw-bold">Neue Planung</h2>
                            <p class="mb-4 text-muted">Erstellen Sie einen neuen Terminplan und verschicken Sie den Buchungslink an Ihre Zielgruppe.</p>
                            <a class="btn btn-outline-primary w-100" href="{{ url_for('terminplaner.configure', tenant=tenant_id) }}">Konfiguration öffnen</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-4">
                        <div class="card-body p-4">
                            <div class="display-6 mb-3">🔗</div>
                            <h2 class="h4 fw-bold">Buchungslink</h2>
                            <p class="mb-4 text-muted">Die öffentliche Buchungsseite liegt unter dem jeweiligen Terminlink und kann direkt an Teilnehmende weitergegeben werden.</p>
                            <div class="small text-muted">Die Buchungsseite wird aus dem Terminplan automatisch erzeugt.</div>
                        </div>
                    </div>
                </div>
            </div>

            {% if current_user %}
            <div class="mt-4 p-4 rounded-4 bg-white shadow-sm">
                <h2 class="h5 fw-bold mb-2">Angemeldet als {{ current_user }}</h2>
                <p class="mb-0 text-muted">Sie können Termine anlegen, den Kalender prüfen und Buchungslinks verteilen.</p>
            </div>

            <div class="mt-4 p-4 rounded-4 bg-white shadow-sm">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-3">
                    <h2 class="h5 fw-bold mb-0">Kommende Termine</h2>
                    <span class="text-muted small">Alle offenen Terminpläne dieses Nutzers</span>
                </div>

                {% if upcoming_events %}
                <div class="vstack gap-3">
                    {% for event in upcoming_events %}
                    <div class="border rounded-3 p-3">
                        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
                            <div>
                                <div class="fw-semibold">{{ event.date_start }} bis {{ event.date_end }}</div>
                                <div class="text-muted small">ID: {{ event.appointment_id }}</div>
                                {% if event.time_span %}
                                <div class="small mt-1">Zeitfenster: {{ event.time_span|join(' | ') }}</div>
                                {% endif %}
                                {% if event.note %}
                                <div class="small mt-1 text-muted">Notiz: {{ event.note }}</div>
                                {% endif %}
                            </div>
                            <div class="text-lg-end">
                                <div class="small mb-2">Gebucht: <strong>{{ event.slots_booked }}</strong> / {{ event.slots_total }} | Frei: <strong>{{ event.slots_left }}</strong></div>
                                <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
                                    <a class="btn btn-sm btn-primary" href="{{ event.link }}" target="_blank" rel="noopener">Client-Link öffnen</a>
                                    {% if event.calendar_link %}
                                    <a class="btn btn-sm btn-outline-primary" href="{{ event.calendar_link }}">.ics</a>
                                    {% endif %}
                                    <form method="post" action="{{ url_for('terminplaner.delete_appointment', appointment_id=event.appointment_id, tenant=tenant_id) }}" class="d-inline" onsubmit="return confirm('Diesen Terminplan wirklich löschen?');">
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Entfernen</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-muted">Keine kommenden Termine gefunden.</div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}