{% extends 'signage/_layout.html.twig' %}

{% block signage_title %}{{ event ? 'Termin bearbeiten' : 'Neuer Termin' }}{% endblock %}

{% block signage_javascripts %}
    <script src="{{ asset('js/admin/signage-event.js') }}?v={{ sg_v }}" defer></script>
{% endblock %}

{% set weekday_labels = {1: 'Mo', 2: 'Di', 3: 'Mi', 4: 'Do', 5: 'Fr', 6: 'Sa', 7: 'So'} %}
{% set weekday_names = {1: 'Montag', 2: 'Dienstag', 3: 'Mittwoch', 4: 'Donnerstag', 5: 'Freitag', 6: 'Samstag', 7: 'Sonntag'} %}

{% block signage_content %}
<a href="{{ path('signage_device_show', {id: device.id}) }}#kalender" class="sg-back"><i class="fas fa-arrow-left"></i>{{ device.name }} · Zeitplan</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">{{ event ? 'Termin bearbeiten' : 'Neuer Termin' }}</h1>
        <div class="sg-subtitle">Uhrzeiten in lokaler Gerätezeit ({{ device.timezone }}). Wirksam erst nach dem Veröffentlichen.</div>
    </div>
</div>

{% for error in errors %}
    <div class="alert alert-danger sg-flash py-2"><i class="fas fa-exclamation-circle me-1"></i>{{ error }}</div>
{% endfor %}

<form method="post" class="row g-3 align-items-start" data-event-form>
    <input type="hidden" name="_token" value="{{ csrf_token('signage_event_form_' ~ device.id) }}">

    <div class="col-xl-8">
        <section class="sg-card">
            <div class="sg-card-body">
                <div class="sg-form-section">
                    <div class="sg-form-section-title">Was</div>
                    <div class="row g-3">
                        <div class="col-md-7">
                            <label class="form-label" for="ev-title">Titel</label>
                            <input type="text" name="title" id="ev-title" value="{{ values.title }}" maxlength="200" class="form-control" required placeholder="z. B. Schwimmkurs Montagabend">
                        </div>
                        <div class="col-md-5">
                            <label class="form-label" for="ev-playlist">Playlist</label>
                            <select name="playlist" id="ev-playlist" class="form-select" required>
                                <option value="">– bitte wählen –</option>
                                {% for p in playlists %}
                                    <option value="{{ p.id }}" {{ p.id ~ '' == values.playlist ~ '' ? 'selected' }}>{{ p.name }}{{ p.empty ? ' (leer)' }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-7">
                            <label class="form-label d-block">Ausgabe</label>
                            {% if device.targets|length > 1 %}
                                <div class="sg-segmented">
                                    {% for t in device.targets %}
                                        <input type="radio" class="btn-check" name="target" id="ev-target-{{ loop.index }}" value="{{ t }}" {{ t == values.target or (values.target not in device.targets and loop.first) ? 'checked' }}>
                                        <label for="ev-target-{{ loop.index }}">{{ t }}</label>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <select name="target" class="form-select">
                                    {% for t in device.targets %}<option value="{{ t }}" {{ t == values.target ? 'selected' }}>{{ t }}</option>{% endfor %}
                                </select>
                            {% endif %}
                        </div>
                        <div class="col-md-5">
                            <label class="form-label" for="ev-priority">Priorität</label>
                            <input type="number" name="priority" id="ev-priority" value="{{ values.priority }}" min="0" max="1000" class="form-control">
                            <div class="form-text">0–1000. Bei Überschneidung gewinnt der höhere Wert.</div>
                        </div>
                    </div>
                </div>

                <div class="sg-form-section">
                    <div class="sg-form-section-title">Wann</div>
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                        <label class="form-label mb-0">Wochentage</label>
                        <div class="sg-quick">
                            <button type="button" data-weekday-preset="1,2,3,4,5">Mo–Fr</button>
                            <button type="button" data-weekday-preset="6,7">Wochenende</button>
                            <button type="button" data-weekday-preset="1,2,3,4,5,6,7">Täglich</button>
                            <button type="button" data-weekday-preset="">Keine</button>
                        </div>
                    </div>
                    <div class="sg-weekdays mb-4">
                        {% for num, label in weekday_labels %}
                            <input class="btn-check" type="checkbox" name="weekdays[]" value="{{ num }}" id="wd{{ num }}" {{ num in values.weekdays ? 'checked' }} autocomplete="off">
                            <label class="sg-day" for="wd{{ num }}" title="{{ weekday_names[num] }}">{{ label }}</label>
                        {% endfor %}
                    </div>
                    <div class="row g-3">
                        <div class="col-sm-6 col-md-3">
                            <label class="form-label" for="ev-start">Von</label>
                            <input type="time" name="start_time" id="ev-start" value="{{ values.start_time|slice(0, 5) }}" class="form-control" required>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <label class="form-label" for="ev-end">Bis</label>
                            <input type="time" name="end_time" id="ev-end" value="{{ values.end_time|slice(0, 5) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" role="switch" name="end_day_offset" value="1" id="offset" {{ values.end_day_offset ? 'checked' }}>
                                <label class="form-check-label" for="offset">Endet am Folgetag <span class="sg-muted small">(über Mitternacht, max. 24 h)</span></label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <label class="form-label" for="ev-from">Beginnt am</label>
                            <input type="date" name="start_date" id="ev-from" value="{{ values.start_date }}" class="form-control" required>
                        </div>
                        <div class="col-sm-6 col-md-3">
                            <label class="form-label" for="ev-until">Wiederholen bis</label>
                            <input type="date" name="until_date" id="ev-until" value="{{ values.until_date }}" class="form-control">
                            <div class="form-text">leer = unbegrenzt</div>
                        </div>
                    </div>
                </div>

                <div class="sg-form-section">
                    <div class="sg-form-section-title">Ausnahmen</div>
                    <label class="form-label" for="ev-exceptions">Tage, an denen der Termin entfällt</label>
                    <textarea name="exceptions" id="ev-exceptions" rows="3" class="form-control sg-mono" placeholder="2026-12-24&#10;31.12.2026">{{ values.exceptions }}</textarea>
                    <div class="form-text">Ein Datum pro Zeile, JJJJ-MM-TT oder TT.MM.JJJJ. Gemeint ist der Tag, an dem der Termin beginnt.</div>
                </div>
            </div>
        </section>
    </div>

    <div class="col-xl-4">
        <aside class="sg-card sg-summary">
            <div class="sg-card-header"><h2 class="sg-card-title"><i class="far fa-lightbulb"></i>Zusammenfassung</h2></div>
            <div class="sg-card-body">
                <p class="sg-summary-text mb-3" data-event-summary aria-live="polite">Wird beim Ausfüllen erstellt.</p>
                <ul class="small ps-3 mb-0" data-event-warnings></ul>
            </div>
            <div class="sg-card-footer d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-check me-1"></i>Speichern</button>
                <a href="{{ path('signage_device_show', {id: device.id}) }}#kalender" class="btn btn-outline-secondary">Abbrechen</a>
            </div>
        </aside>
    </div>
</form>
{% endblock %}