{% extends 'foundation/front/front.html.twig' %}
{% block body_class %}accomplishments{% endblock %}

{% block metaTitle %}
    {% if sectionPage is defined and sectionPage.i18ns is defined and sectionPage.i18ns|length > 0 %}
        {% set localeCode = sectionPage.i18ns[0].locale|split('_')|first %}
        {% set i18n = ( app.request.locale == localeCode and localeCode is defined) ? sectionPage.i18ns[0] : (sectionPage.i18ns[1] is defined ? sectionPage.i18ns[1] : null) %}
        {% if i18n %}
            <title> MK WBC | {{ i18n.name }}</title>
        {% else %}
            <title> MK WBC | Default Title</title>
        {% endif %}
    {% else %}
        <title> MK WBC | accomplishments</title>
    {% endif %}
{% endblock %}
{% block javascripts %}

    {{ parent() }}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const buttons = document.querySelectorAll('.m_tabs-btn .m_btn');
            const tabContent = document.getElementById('m_tabs-content');

            // Active le bon bouton selon le paramètre "tab" dans l'URL
            const urlParams = new URLSearchParams(window.location.search);
            const activeCategory = urlParams.get('tab') || 'all';

            buttons.forEach(button => {
                if (button.dataset.category === activeCategory) {
                    button.classList.add('m_active');
                } else {
                    button.classList.remove('m_active');
                }
            });

            // Filtrage des contenus
            const items = tabContent.querySelectorAll('.m_item-post');
            items.forEach(item => {
                if (activeCategory === 'all' || item.classList.contains(activeCategory)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });

            // Ajout d’un événement pour changer dynamiquement l’URL
            buttons.forEach(button => {
                button.addEventListener('click', function () {
                    const category = this.dataset.category;

                    // Met à jour l'URL sans recharger la page
                    const newUrl = new URL(window.location.href);
                    newUrl.searchParams.set('tab', category);
                    window.history.pushState({}, '', newUrl);

                    // Actualise l'affichage local
                    buttons.forEach(b => b.classList.remove('m_active'));
                    this.classList.add('m_active');

                    items.forEach(item => {
                        if (category === 'all' || item.classList.contains(category)) {
                            item.style.display = '';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const buttons = document.querySelectorAll(".m_tabs-btn .m_btn");
            const accomplishments = document.querySelectorAll(".m_item-post");

            buttons.forEach(button => {
                button.addEventListener("click", function () {
                    // Retirer la classe active de tous les boutons
                    buttons.forEach(btn => btn.classList.remove("m_active"));
                    this.classList.add("m_active");

                    const category = this.getAttribute("data-category");

                    // Afficher/Masquer les articles en fonction de la catégorie
                    accomplishments.forEach(elt => {
                        if (category === "all" || elt.classList.contains(category)) {
                            elt.style.display = ""; // Assurez-vous que "flex" est correct pour votre mise en page
                        } else {
                            elt.style.display = "none";
                        }
                    });
                });
            });
        });
    </script>
{% endblock %}
{% block front %}
    <main class="m_site-main m_position-relative">
        <div class="m_breadcumbs">
            <div class="m_container-lg">
                <ul class="m_nav-breadcrumb">
                    <li>
                        <a href="{{ path('app_home') }}"><i class="fa fa-home"></i></a>
                    </li>
                    <li>
                        <a href="#"> {{ 'achievements'|trans }}</a>
                    </li>
                </ul>
            </div>
        </div>

        <section class="m_section-banner m_section-page">
            <div class="m_section-banner-container m_position-relative">
                <div class="m_banner-bg"
                    {% if sectionPage is defined and sectionPage.thumbnail is defined and sectionPage.thumbnail.filename is defined %}
                     style="background-image: url('{{ path('proxy_avatar', {'path': sectionPage.thumbnail.filename}) }}');"
                    {% else %}
                     style="background-image: url('{{ asset('images/default_banner.png') }}');">
                </div> <!-- fallback image -->
                {% endif %}>
            </div>
            <div class="m_container-lg m_position-relative">
                <div class="m_section-banner-desc">
                    {% if sectionPage is defined and sectionPage.i18ns is defined and sectionPage.i18ns|length > 0 %}
                        {% set localeCode = sectionPage.i18ns[0].locale|split('_')|first %}
                        {% set i18n = ( app.request.locale == localeCode and localeCode is defined) ? sectionPage.i18ns[0] : (sectionPage.i18ns[1] is defined ? sectionPage.i18ns[1] : null) %}
                        {% if i18n %}
                            <h1>{{ i18n.name }}</h1>
                            <p>{{ i18n.description|raw }}</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </section>
        <section class="m_section-page m_section-tabs-accomplish">
            <div class="m_container-lg">
                <div class="m_tabs-accomplish">
                    <!-- Génération dynamique des boutons de catégorie -->
                    <div class="m_tabs-btn m_flexs">
                        <button class="m_btn m_active" data-category="all">
                            {{'achievements'|trans }}

                        </button>
                        {% if categories is defined and categories|length > 0 %}

                            {% for elt in categories %}
                                {% set localeCode = elt.i18ns[0].locale|split('_')|first %}
                                {% set i18n = (app.request.locale == localeCode and elt.i18ns[0] is defined) ? elt.i18ns[0] : (elt.i18ns[1] is defined ? elt.i18ns[1] : null) %}
                                {% if i18n %}
                                    <button class="m_btn" data-category="m_cat-{{ elt.id }}">
                                        {{ i18n.name|u.truncate(90, '...') }}
                                    </button>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                    <div id="m_tabs-content" class="m_tabs-content m_flex">
                        {% if subCategories is defined and subCategories|length > 0 %}
                            {% for elt in subCategories %}
                                {% set localeCode = elt.i18ns[0].locale|split('_')|first %}
                                {% set i18n = ( app.request.locale == localeCode and elt.i18ns[0] is defined) ? elt.i18ns[0] : (elt.i18ns[1] is defined ? elt.i18ns[1] : null) %}
                                {% if i18n %}
                                    <article class="m_item-post {% for category in elt.categories %} m_cat-{{ category.id }} {% endfor %}">
                                        <div class="m_item-post-container m_position-relative">
                                            <div class="m_item-post-thumb">
                                                <img alt="" title=""
                                                     src="{{ elt.thumbnail is defined and elt.thumbnail.filename is defined
                                                     ? path('proxy_avatar', {'path': elt.thumbnail.filename})
                                                     : asset('images/defaults/media.png') }}"/>
                                            </div>
                                            <div class="m_item-post-content">
                                                <h2 class="m_title-blue-underline">{{ i18n.name|u.truncate(90, '...') }}</h2>
                                            </div>
                                            <a class="m_link-overlay"
                                               href="{{ path('app_accomplishments_sub_category_list',{'id':elt.id,'slug':i18n.slug}) }}"
                                               title="{{ i18n.name|u.truncate(90, '...') }}"></a>
                                        </div>
                                    </article>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>

    </main>
{% endblock %}