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

{% block title %}Phases finales | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/knockout-fixtures.css') }}?v=17">
{% endblock %}

{% block body %}
<div class="knockout-page">
    <section class="ta-card p-5 knockout-intro">
        <h1 class="ta-card-title">Phases finales</h1>
        <p class="ta-card-text mb-0">
            Phase à élimination directe (16es → 8es → quarts → demi-finales → finale).
            Pronostiquez comme sur le tableau de bord avant le coup d'envoi.
        </p>
    </section>

    {% if knockout_rounds is not empty %}
        {% set featured_round = knockout_featured_round|default(knockout_rounds[0].key) %}
        <section class="ta-card mt-4 knockout-rounds match-dashboard-wrap {{ prono_access_blocked|default(false) ? 'match-dashboard-wrap--locked' : '' }}" aria-label="Étapes des phases finales">
            <div class="knockout-rounds__slider" role="tablist" aria-label="Choisir une étape">
                {% for round in knockout_rounds %}
                    {% set is_active = round.key == featured_round %}
                    <button
                        type="button"
                        role="tab"
                        id="knockout-tab-{{ round.key }}"
                        class="knockout-round-tab{{ is_active ? ' is-active' : '' }}"
                        aria-selected="{{ is_active ? 'true' : 'false' }}"
                        aria-controls="knockout-panel-{{ round.key }}"
                        data-knockout-tab="{{ round.key }}"
                    >
                        <span class="knockout-round-tab__short">{{ round.short_label }}</span>
                        <span class="knockout-round-tab__full">{{ round.label }}</span>
                    </button>
                {% endfor %}
            </div>

            {% set default_prono_cutoff = default_prono_cutoff_match() %}
            {% set default_prono_cutoff_day = default_prono_cutoff and default_prono_cutoff.dateHeure ? default_prono_cutoff.dateHeure|date('Y-m-d') : null %}

            {% for round in knockout_rounds %}
                {% set is_active = round.key == featured_round %}
                <div
                    id="knockout-panel-{{ round.key }}"
                    role="tabpanel"
                    aria-labelledby="knockout-tab-{{ round.key }}"
                    class="knockout-round-panel{{ is_active ? ' is-active' : '' }}"
                    data-knockout-panel="{{ round.key }}"
                    {{ is_active ? '' : 'hidden' }}
                >
                    <div class="knockout-round-panel__head">
                        <h2 class="knockout-round-panel__title">{{ round.label }}</h2>
                        {% if round.matches is not empty %}
                            <span class="knockout-round-panel__count">
                                {{ round.matches|length }} match{{ round.matches|length > 1 ? 's' : '' }}
                            </span>
                        {% endif %}
                    </div>

                    {% if round.matches is empty %}
                        <p class="ta-card-text knockout-round-panel__empty">Aucun match disponible pour cette étape pour le moment.</p>
                    {% else %}
                        {% set default_prono_cutoff_day_shown = false %}
                        {% set current_day = null %}
                        {% for match in round.matches %}
                            {% set match_day = match.dateHeure ? match.dateHeure|date('Y-m-d') : 'date-inconnue' %}
                            {% if match_day != current_day %}
                                {% if not loop.first %}
                                        </div>
                                    </div>
                                {% endif %}
                                {% set current_day = match_day %}
                                <div class="match-day-section knockout-round-panel__day{{ loop.first ? '' : ' mt-6' }}">
                                    <h3 class="match-day-title">
                                        {{ match.dateHeure ? match.dateHeure|fr_date_long : 'Date à définir' }}
                                    </h3>
                                    {% if default_prono_cutoff_day and match_day == default_prono_cutoff_day and not default_prono_cutoff_day_shown %}
                                        {% include 'competition/_default_prono_cutoff_notice.html.twig' with { match: default_prono_cutoff } only %}
                                        {% set default_prono_cutoff_day_shown = true %}
                                    {% endif %}
                                    <div class="match-card-grid">
                            {% endif %}
                                {% include 'competition/_match_card.html.twig' with {
                                    match: match,
                                    pronostic: pronostics_by_match_id[match.id] ?? null,
                                    partner_pronostics: partner_pronostics_by_match_id[match.id] ?? [],
                                    now: now,
                                    prono_access_blocked: prono_access_blocked|default(false),
                                    joker_usage_by_match_id: joker_usage_by_match_id|default({}),
                                    espion_intel_by_match_id: espion_intel_by_match_id|default({}),
                                    show_joker_ui: show_joker_ui|default(false),
                                    team_favorite_highlight: team_favorite_highlight|default(null),
                                    match_goals: goals_by_match_id[match.id] ?? [],
                                    team_match_points_by_match_id: team_match_points_by_match_id|default({}),
                                } only %}
                            {% if loop.last %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            {% endfor %}
        </section>
    {% endif %}
</div>

<script>
    (function initKnockoutRounds() {
        const bind = () => {
            const slider = document.querySelector('.knockout-rounds__slider');
            if (!slider || slider.dataset.bound === '1') {
                return;
            }
            slider.dataset.bound = '1';

            const tabs = Array.from(slider.querySelectorAll('[data-knockout-tab]'));
            const panels = Array.from(document.querySelectorAll('[data-knockout-panel]'));
            if (tabs.length === 0) {
                return;
            }

            const activate = (key) => {
                tabs.forEach((tab) => {
                    const isActive = tab.dataset.knockoutTab === key;
                    tab.classList.toggle('is-active', isActive);
                    tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
                });
                panels.forEach((panel) => {
                    const isActive = panel.dataset.knockoutPanel === key;
                    panel.classList.toggle('is-active', isActive);
                    panel.toggleAttribute('hidden', !isActive);
                });
                const activeTab = tabs.find((tab) => tab.dataset.knockoutTab === key);
                if (activeTab) {
                    activeTab.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
                }
            };

            tabs.forEach((tab) => {
                tab.addEventListener('click', () => activate(tab.dataset.knockoutTab));
            });
        };

        document.addEventListener('DOMContentLoaded', bind);
        document.addEventListener('turbo:load', bind);
        bind();
    })();
</script>

{% if app.user %}
    {% include 'competition/_joker_modal.html.twig' %}
    {% include 'competition/_match_espion_intel_dialog.html.twig' %}
{% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if app.user %}
        <script src="{{ asset('js/joker-match.js') }}?v=25" defer></script>
        <script src="{{ asset('js/match-espion-intel.js') }}?v=2" defer></script>
        <script src="{{ asset('js/match-pronostic-autosave.js') }}?v=3" defer data-turbo-track="reload"></script>
    {% endif %}
{% endblock %}