{% 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>

                    <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>
                </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) return;

    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));
})();
</script>
{% endblock %}