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

{% block title %}Kody — {{ competition.name }}{% endblock %}
{% block page_pretitle %}{{ competition.name }}{% endblock %}
{% block page_title %}Kody zaproszeń{% endblock %}

{% block page_content %}
    {% include 'admin/_partial/nav.html.twig' with {active: 'codes'} %}

        <div class="row row-cards">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">Wygeneruj kody</h3></div>
                    <div class="card-body">
                        <p class="text-secondary">
                            Klubów bez uczestnika: <strong>{{ freeSlots }}</strong>.
                            Jeden kod bierze cały klub{% if competition.mode.managersPerClub > 1 %} —
                            w deblu osoba, która go użyje, zgłasza od razu obie drużyny pary{% endif %}.
                        </p>

                        <form method="post" action="{{ path('app_admin_codes_generate', {slug: competition.slug}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('generate-codes') }}">
                            <label class="form-label" for="count">Ile kodów</label>
                            <input type="number" id="count" name="count" class="form-control"
                                   value="{{ freeSlots > 0 ? freeSlots : 1 }}" min="1" max="200">
                            <button class="btn btn-primary w-100 mt-3">Wygeneruj</button>
                        </form>

                        <div class="form-hint mt-3">
                            Uczestnik wchodzi na
                            <a href="{{ path('app_join', {slug: competition.slug}) }}">{{ path('app_join', {slug: competition.slug}) }}</a>
                            i wpisuje swój kod.
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Wydane kody ({{ codes|length }})</h3>
                        {% if codes|length %}
                            <div class="card-actions">
                                <button type="button" class="btn btn-sm js-copy"
                                        data-copy="{% for code in codes|filter(c => not c.used) %}{{ url('app_join_offer', {slug: competition.slug, code: code.code}) }}{{ "\n" }}{% endfor %}">
                                    Kopiuj wszystkie wolne linki
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    <form method="post" action="{{ path('app_admin_codes_labels', {slug: competition.slug}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('code-labels') }}">
                    <div class="table-responsive">
                        <table class="table table-vcenter card-table">
                            <thead>
                            <tr><th>Kod</th><th style="width: 14rem;">Dla kogo</th><th>Status</th><th>Uczestnik</th><th>Klub</th><th></th></tr>
                            </thead>
                            <tbody>
                            {% for code in codes %}
                                {% set joinUrl = url('app_join_offer', {slug: competition.slug, code: code.code}) %}
                                <tr>
                                    <td>
                                        <div class="font-monospace fw-bold">{{ code.code }}</div>
                                        <div class="text-secondary small text-break">{{ joinUrl }}</div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm"
                                               name="label[{{ code.id }}]" value="{{ code.label }}"
                                               placeholder="np. Marek" autocomplete="off">
                                    </td>
                                    <td>
                                        {% if code.used %}
                                            <span class="badge bg-green-lt">wykorzystany</span>
                                        {% else %}
                                            <span class="badge bg-secondary-lt">wolny</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ code.manager ? code.manager.uefaTeamName : '—' }}</td>
                                    <td>{{ code.manager and code.manager.club ? code.manager.club.name : '—' }}</td>
                                    <td class="text-end text-nowrap">
                                        <button type="button" class="btn btn-sm js-copy" data-copy="{{ code.code }}">Kod</button>
                                        <button type="button" class="btn btn-sm js-copy" data-copy="{{ joinUrl }}">Link</button>
                                    </td>
                                </tr>
                            {% else %}
                                <tr><td colspan="6" class="text-secondary">Nie wygenerowano jeszcze żadnego kodu.</td></tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    {% if codes|length %}
                        <div class="card-footer d-flex align-items-center gap-2">
                            <button class="btn btn-primary">Zapisz opisy</button>
                            <span class="text-secondary small">Notatka tylko dla Ciebie — uczestnik jej nie widzi.</span>
                        </div>
                    {% endif %}
                    </form>
                </div>
            </div>
        </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.querySelectorAll('.js-copy').forEach(function (button) {
            button.addEventListener('click', function () {
                var text = button.dataset.copy;
                var label = button.textContent;

                function done(ok) {
                    button.textContent = ok ? 'Skopiowane' : 'Nie udało się';
                    button.classList.toggle('btn-success', ok);
                    setTimeout(function () {
                        button.textContent = label;
                        button.classList.remove('btn-success');
                    }, 1500);
                }

                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(function () { done(true); }, function () { done(false); });
                    return;
                }

                // stare przegladarki i polaczenia bez https
                var helper = document.createElement('textarea');
                helper.value = text;
                helper.setAttribute('readonly', '');
                helper.style.position = 'absolute';
                helper.style.left = '-9999px';
                document.body.appendChild(helper);
                helper.select();
                done(document.execCommand('copy'));
                document.body.removeChild(helper);
            });
        });
    </script>
{% endblock %}