{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro_popup %}

{% block title %}
    INSTALL BOIS
{% endblock %}

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    {{ parent() }}
{% endblock %}

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

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('install-bois/rule-engine/v2/rule_engine_v2.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    <div class="containerInfosProjectSimple">
        {{ parent() }}
        {{ include('project/_block/project_infos_simple.html.twig') }}
    </div>
{% endblock %}

{% block page_content %}
    <div
        id="rule-engine-v2-container"
        data-service-created-id="{{ serviceCreatedOnProject.id }}"
        {% if targetBlock is defined and targetBlock %}
            {# Si défini, rule_engine_v2.js navigue directement vers ce bloc au chargement (doNavigateToBlock).
               Transmis depuis ServiceCreatedOnProjectController lors d'un retour depuis les prérequis. #}
            data-target-block="{{ targetBlock }}"
        {% endif %}
    >
        <section>
            {% set service_slug = serviceCreatedOnProject.serviceRE.slug %}
            {% if 'rtp' not in service_slug and 'deperditionthermique' not in service_slug %}
                <div class="schemaButtonContainer">
                    <button id="showSchemaBtn" class="boutonAction">Voir le schéma</button>
                </div>
            {% endif %}
            <div class="re-v2-main-image-container-mobile">
                <div>
                    <img src="{{ asset('install-bois/icon/cross-close.svg') }}" alt="close" id="closeSchemaBtn">
                    <div id="re-v2-main-image-mobile"></div>
                    <div id="re-v2-main-image-label-mobile"></div>
                </div>
            </div>
            <div id="navigationBlocks" style="margin: 1rem 0;">
                {# La navigation chargé dynamiquement par js #}
            </div>

            <div class="re-v2-main-layout">
                <div class="re-v2-col-left">
                    <div id="re-v2-main-image-container"></div>
                    <div id="re-v2-main-image-label"></div>
                </div>
                <div class="re-v2-col-center">
                    <div>
                        <div id="question-block-wrapper" style="display: grid; gap: 2rem">
                            {# Le contenu chargé dynamiquement par js  #}
                        </div>
                        <div style="text-align: end; margin-top: 1rem;">
                            <button id="goNextBlock" class="boutonAction nextBlockBtn" style="margin-left: auto; display: none">Valider</button>
                        </div>
                    </div>
                </div>
                <div class="re-v2-col-right">
                    <div id="step-image-container"></div>
                </div>
            </div>

            <div id="loaderService" style="display:none; width: 100%; height: 100%;">
                <img src="{{ asset('images/loader.svg') }}" alt="Loader" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px;">
            </div>
        </section>
    </div>

    {{ macro_popup.popup_info_validator() }}
    {{ macro_popup.popup_blocked_validator() }}

    {# Injecte les routes Symfony consommées par rule_engine_v2.js (RE_FLOW_ROUTES).
       editPrerequisiteURI est utilisé par handleBreadcrumbClick() pour le retour aux prérequis. #}
    <script type="application/javascript">
        const editPrerequisiteURI = '{{ path('rule_engine_prerequisite_start', {id: 'SCOP_PLACEHOLDER'}) }}';
        const RE_FLOW_ROUTES = {
            getStep: "{{ path('rule_engine_flow_get_step', {id: serviceCreatedOnProject.id}) }}",
            saveStep: "{{ path('rule_engine_flow_save_step') }}",
            validateBlock: "{{ path('rule_engine_flow_validate_block', {id: serviceCreatedOnProject.id}) }}",
            navigateBack: "{{ path('rule_engine_flow_navigate_back', {scop: serviceCreatedOnProject.id, blockId: 'BLOCKID_PLACEHOLDER'}) }}",
            complete: "{{ path('rule_engine_flow_complete', {id: serviceCreatedOnProject.id}) }}",
            checkValidator: "{{ path('rule_engine_validator_check') }}"
        };
    </script>
{% endblock %}