{% extends 'base.html.twig' %}

{% block content %}
    <h1>Neues Announcement</h1>

    <form method="POST">
        <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea name="message" id="message" class="form-control" required></textarea>
        </div>

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="immediate" name="immediate">
            <label class="form-check-label" for="immediate">Sofort senden</label>
        </div>

        <div class="mb-3" id="scheduleFields">
            <label for="scheduledAt" class="form-label">Geplant für</label>
            <input type="datetime-local" name="scheduledAt" id="scheduledAt" class="form-control">

            <label class="mt-3">Mehrfachauswahl für tägliche Zeiten</label>
            <div class="d-flex gap-2">
                <input type="checkbox" name="scheduledTimes[]" value="06:00"> 6:00
                <input type="checkbox" name="scheduledTimes[]" value="12:00"> 12:00
                <input type="checkbox" name="scheduledTimes[]" value="18:00"> 18:00
                <input type="checkbox" name="scheduledTimes[]" value="24:00"> 24:00
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-3">Erstellen</button>
        <a href="{{ path('announcements_list') }}" class="btn btn-secondary mt-3">Zurück</a>
    </form>

    <script>
        document.getElementById("immediate").addEventListener("change", function () {
            document.getElementById("scheduleFields").style.display = this.checked ? "none" : "block";
        });
    </script>
{% endblock %}