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

{% block title %}Nowe rozgrywki{% endblock %}
{% block page_title %}Nowe rozgrywki{% endblock %}

{% block page_content %}
    <div class="card">
        <div class="card-body">
            {{ form_start(form) }}
            {{ form_row(form.name) }}
            {{ form_row(form.season) }}
            {{ form_row(form.mode) }}
            {{ form_row(form.format) }}

            <div id="pole-klubow" hidden>
                {{ form_row(form.clubCount) }}

                <div class="alert alert-info" id="podglad-formatu"></div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Załóż rozgrywki</button>
                <a href="{{ path('app_admin_dashboard') }}" class="btn btn-link">Anuluj</a>
            </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            // opisy formatow policzyl PHP - tutaj tylko podstawiamy gotowe zdanie
            var opisy = {{ formatPreviews|json_encode|raw }};

            var pole = document.getElementById('pole-klubow');
            var podglad = document.getElementById('podglad-formatu');
            var liczba = document.getElementById('{{ form.clubCount.vars.id }}');
            var formaty = document.querySelectorAll('input[name="{{ form.format.vars.full_name }}"]');

            function odswiez() {
                var wybrany = document.querySelector('input[name="{{ form.format.vars.full_name }}"]:checked');
                var automatyczny = wybrany && wybrany.value === 'auto';

                pole.hidden = !automatyczny;

                if (!automatyczny) {
                    return;
                }

                var opis = opisy[liczba.value];

                podglad.textContent = opis
                    ? opis
                    : 'Podaj parzystą liczbę klubów od 4 do 36.';
                podglad.classList.toggle('alert-warning', !opis);
                podglad.classList.toggle('alert-info', !!opis);
            }

            formaty.forEach(function (input) {
                input.addEventListener('change', odswiez);
            });

            liczba.addEventListener('input', odswiez);

            odswiez();
        })();
    </script>
{% endblock %}