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

{% block title %}Grundeinstellungen – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-cog me-2"></i>Grundeinstellungen{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% set actions %}
    <a href="{{ path('admin_fisch_landing_index') }}" class="btn btn-fisch-outline btn-sm">
        <i class="fas fa-file-alt me-1"></i> Startseite
    </a>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Grundeinstellungen',
    icon: 'cog',
    subtitle: 'Saison ' ~ seasonYear ~ ' — Anmeldephase, Altersgrenzen und Kurszeitraum',
    actions_html: actions
} %}

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
        </div>
    {% endfor %}
{% endfor %}

<form method="post" action="{{ path('admin_fisch_settings_index') }}" class="fisch-settings-form">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_settings') }}">

    {# Status-Hinweis #}
    <div class="fisch-settings-status {% if registrationEffectivelyOpen %}fisch-settings-status--open{% else %}fisch-settings-status--closed{% endif %} mb-4">
        <div class="fisch-settings-status__icon">
            <i class="fas {% if registrationEffectivelyOpen %}fa-door-open{% else %}fa-door-closed{% endif %}"></i>
        </div>
        <div>
            <strong>{% if registrationEffectivelyOpen %}Anmeldung ist derzeit offen{% else %}Anmeldung ist derzeit geschlossen{% endif %}</strong>
            <p class="mb-0 small">
                Offen nur wenn der Schalter aktiv ist
                {% if config.registrationStartsAt or config.registrationEndsAt %}
                    und das aktuelle Datum im Anmeldefenster liegt
                {% endif %}.
            </p>
        </div>
    </div>

    <div class="row g-4">
        {# Anmeldung #}
        <div class="col-lg-6">
            <div class="fisch-card h-100">
                <div class="card-header">
                    <i class="fas fa-toggle-on"></i> Anmeldephase
                </div>
                <div class="card-body">
                    <div class="fisch-settings-switch mb-4">
                        <div>
                            <label class="form-label fw-semibold mb-0" for="registration_open">Anmeldung freischalten</label>
                            <div class="form-text mt-0">Manueller Hauptschalter für das öffentliche Portal</div>
                        </div>
                        <div class="form-check form-switch m-0">
                            <input type="hidden" name="registration_open" value="0">
                            <input class="form-check-input fisch-settings-switch__input" type="checkbox"
                                   name="registration_open" value="1" id="registration_open"
                                   {% if config.registrationOpen %}checked{% endif %}>
                        </div>
                    </div>

                    {% if testBookingUrl %}
                        <div class="alert alert-secondary small mb-3">
                            <strong>Testbuchungs-Link</strong> (Phase geschlossen, mehrfach nutzbar):
                            <div class="input-group input-group-sm mt-2">
                                <input type="text" class="form-control font-monospace" id="fischTestBookingUrl"
                                       value="{{ testBookingUrl }}" readonly>
                                <button type="button" class="btn btn-outline-secondary" id="fischCopyTestLink"
                                        title="Link kopieren">
                                    <i class="fas fa-copy"></i>
                                </button>
                                <a class="btn btn-outline-primary" href="{{ testBookingUrl }}" target="_blank" rel="noopener">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                    {% endif %}

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="test_booking_token">Testbuchungs-Token</label>
                        <input type="text" class="form-control font-monospace" id="test_booking_token"
                               name="test_booking_token" maxlength="64"
                               value="{{ config.testBookingToken|default('') }}"
                               placeholder="leer = kein Testzugang (außer Env-Fallback)">
                        <div class="form-text">
                            In den Grundeinstellungen speichern — Link erscheint darüber.
                            Leer lassen und speichern deaktiviert den Admin-Token.
                        </div>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" value="1"
                                   name="test_booking_regenerate" id="test_booking_regenerate">
                            <label class="form-check-label" for="test_booking_regenerate">
                                Beim Speichern neuen Token erzeugen
                            </label>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="registration_starts_at">Öffnung ab</label>
                            <input type="datetime-local" class="form-control" id="registration_starts_at"
                                   name="registration_starts_at"
                                   value="{{ config.registrationStartsAt ? config.registrationStartsAt|date('Y-m-d\\TH:i') : '' }}">
                            <div class="form-text">Optional — leer = kein Start-Limit</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="registration_ends_at">Öffnung bis</label>
                            <input type="datetime-local" class="form-control" id="registration_ends_at"
                                   name="registration_ends_at"
                                   value="{{ config.registrationEndsAt ? config.registrationEndsAt|date('Y-m-d\\TH:i') : '' }}">
                            <div class="form-text">Optional — leer = kein End-Limit</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Altersgrenzen #}
        <div class="col-lg-6">
            <div class="fisch-card h-100">
                <div class="card-header">
                    <i class="fas fa-child"></i> Altersgruppen
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-4">
                            <label class="form-label fw-semibold" for="age_min">Von (Jahre)</label>
                            <input type="number" class="form-control" id="age_min" name="age_min"
                                   value="{{ config.ageMin }}" min="0" max="99" required>
                            <div class="form-text">Mindestalter</div>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold" for="young_age_max">Gruppe A bis</label>
                            <input type="number" class="form-control" id="young_age_max" name="young_age_max"
                                   value="{{ config.youngAgeMax }}" min="0" max="99" required>
                            <div class="form-text">z. B. 6 → A = 5–6</div>
                        </div>
                        <div class="col-4">
                            <label class="form-label fw-semibold" for="age_max">Bis (Jahre)</label>
                            <input type="number" class="form-control" id="age_max" name="age_max"
                                   value="{{ config.ageMax }}" min="0" max="99" required>
                            <div class="form-text">Höchstalter</div>
                        </div>
                    </div>
                    <div class="fisch-settings-age-preview mt-3" id="fischAgePreview">
                        <span class="badge fisch-age-badge">A: {{ config.ageMin }}–{{ config.youngAgeMax }} Jahre</span>
                        <span class="badge fisch-age-badge fisch-age-badge--b">B: {{ config.youngAgeMax + 1 }}–{{ config.ageMax }} Jahre</span>
                    </div>
                    <p class="form-text mt-3 mb-0">
                        <strong>So funktioniert der Regler:</strong>
                        Gruppe&nbsp;A = Mindestalter bis „Gruppe A bis“;
                        Gruppe&nbsp;B = alles darüber bis Höchstalter.
                        Es zählen nur <strong>ganze Lebensjahre</strong> am Anmeldetag
                        (kein „5,1 Jahre“ — ein Kind ist z.&nbsp;B. mit 5 Jahren und 11 Monaten weiterhin 5).
                        Öffentliche Anmeldung und Sammelanmeldung prüfen das Alter streng;
                        im Admin können Sie bei Umbuchen/Warteliste eine <em>Altersausnahme</em> für Einzelfälle setzen.
                    </p>
                </div>
            </div>
        </div>

        {# Kurszeitraum #}
        <div class="col-12">
            <div class="fisch-card">
                <div class="card-header">
                    <i class="fas fa-calendar-alt"></i> Kurszeitraum (Herbstferien)
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="course_starts_at">Kursbeginn</label>
                            <input type="datetime-local" class="form-control" id="course_starts_at"
                                   name="course_starts_at"
                                   value="{{ config.courseStartsAt ? config.courseStartsAt|date('Y-m-d\\TH:i') : '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="course_ends_at">Kursende</label>
                            <input type="datetime-local" class="form-control" id="course_ends_at"
                                   name="course_ends_at"
                                   value="{{ config.courseEndsAt ? config.courseEndsAt|date('Y-m-d\\TH:i') : '' }}">
                        </div>
                    </div>
                    <div class="form-text mt-2">Für Anzeige und Planung — optional.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="fisch-settings-footer">
        <a href="{{ path('admin_fisch_dashboard') }}" class="btn btn-outline-secondary">Abbrechen</a>
        <button type="submit" class="btn btn-fisch-primary btn-lg">
            <i class="fas fa-save me-1"></i> Speichern
        </button>
    </div>
</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const ageMin = document.getElementById('age_min');
    const ageMax = document.getElementById('age_max');
    const youngMax = document.getElementById('young_age_max');
    const preview = document.getElementById('fischAgePreview');
    if (ageMin && ageMax && youngMax && preview) {
        function updatePreview() {
            const a = parseInt(ageMin.value, 10) || 0;
            const y = parseInt(youngMax.value, 10) || 0;
            const b = parseInt(ageMax.value, 10) || 0;
            preview.innerHTML =
                '<span class="badge fisch-age-badge">A: ' + a + '–' + y + ' Jahre</span> ' +
                '<span class="badge fisch-age-badge fisch-age-badge--b">B: ' + (y + 1) + '–' + b + ' Jahre</span>';
        }

        [ageMin, ageMax, youngMax].forEach(el => el.addEventListener('input', updatePreview));
    }

    const copyBtn = document.getElementById('fischCopyTestLink');
    const urlInput = document.getElementById('fischTestBookingUrl');
    if (copyBtn && urlInput) {
        copyBtn.addEventListener('click', function () {
            urlInput.select();
            navigator.clipboard.writeText(urlInput.value).then(function () {
                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
                setTimeout(function () {
                    copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
                }, 1500);
            }).catch(function () {
                document.execCommand('copy');
            });
        });
    }
})();
</script>
{% endblock %}