{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as popup %}
{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/faq.css') ~ "?rnd=" ~ random() }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="col-sm-12 col-md-12 col-lg-12 faq_header">
        <div class="faq_containerImg">
        </div>
        <div style="    margin: auto;">
            <h1 style="font-size: 18px;">Nous sommes là pour vous aider</h1>
        </div>
    </div>
{% endblock %}

{% block page_content %}
    {% if is_granted('ROLE_ADMIN') %}
        <div style="padding: 1rem; margin: 2rem; text-align: center">
            <a href="{{ path('faq_new_question') }}" class="boutonAction" style="padding: .5rem; margin: 1rem">+ Nouvelle question</a>
        </div>
    {% endif %}
    <div class="col-sm-12 col-md-12 col-lg-12 containerFAQ">
        {% for category in categories %}
            <div class="containerTabs {{ loop.index == 1 ? "active" : "" }}">
                <div class="category">
                    <img src="{{ asset(category.image) }}" alt="">
                    <span>{{ category.name }}</span>
                </div>
                <div class="questions">
                    {% for question in category.FAQQuestions %}
                        <div id="container_question_{{ question.id }}"
                             class="containerQuestionFAQ">
                            <div id="question_{{ question.id }}"
                                 class="section-dropdown">
                                <h3 class="subtitle-summary">
                                    {% if is_granted('ROLE_ADMIN') %}
                                        <div style="display: flex; align-items: center">
                                            <strong style="margin-right: .5rem">
                                                ID : {{ question.id }}
                                            </strong>
                                            <a href="{{ path('faq_edit_question', {id: question.id}) }}" style="font-weight: bold; color: #00B5E6; margin-right: .5rem">Modifier</a>
                                            <form action="{{ path('faq_delete_question', {id: question.id}) }}" method="post">
                                                <button type="submit" style="color: red; border: none; background: none; cursor: pointer; font-weight: bold">Supprimer</button>
                                            </form>
                                        </div>
                                    {% endif %}
                                    {{ question.question }}
                                </h3>
                                <button id="cat_{{ loop.parent.loop.index }}_btn_{{ loop.index }}">
                                    <div class="triangle-dropdown"></div>
                                </button>
                            </div>
                            <div id="cat_{{ loop.parent.loop.index }}_answer_{{ loop.index }}"
                                 class="container-summary section-dropdown-content">
                                <p>
                                    {{ question.answer|nl2br|raw }}
                                </p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    <script type="text/javascript">
        if (isDemo) {
            applyTooltipToDisabledElements('.section-dropdown')
        }

        if (isDemo) {
            $('#container_1_question_1').remove()
        }

        $('.containerTabs').on('click', function () {
            $('.containerTabs,.section-dropdown').removeClass('active');
            $(this).addClass('active');
        });
        $('.section-dropdown').on('click', function () {
            if (!isDemo) {
                $('.containerQuestionFAQ').removeClass('active');
                $(this).closest('.containerQuestionFAQ').addClass('active');
            }
        });

        $(document).ready(function() {
            const hash = window.location.hash;
            if (hash && !isDemo) {
                const $targetElement = $(hash);
                if ($targetElement.length) {

                    const $parentTab = $targetElement.closest('.containerTabs');
                    if ($parentTab.length) {
                        $('.containerTabs,.section-dropdown').removeClass('active');
                        $parentTab.addClass('active');
                    }

                    const $questionContainer = $targetElement.closest('.containerQuestionFAQ');
                    if ($questionContainer.length) {
                        $('.containerQuestionFAQ').removeClass('active');
                        $questionContainer.addClass('active');
                    }

                    $targetElement[0].scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            }
        });
    </script>
{% endblock %}