{% 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() }}
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
    <script type="text/javascript" src="{{ asset('install-bois/hardcoded_services/cdc2/cdc2.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

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

{% block page_content %}
    <section>
        <h1 class="text-center">Bienvenue sur le calcul de dimensionnement</h1>
        <div id="navigationBlocks" style="margin: 1rem 0;">
        </div>
        <div>
            <h2 id="subtitleBlock"></h2>
            <div id="questionsContainer" style="display: grid; gap: 2rem">

            </div>
            <div style="display: flex; justify-content: space-between">
                <button id="goPreviousBlock" class="boutonAction" style="display: none">Block précédent</button>
                <button id="goNextBlock" class="boutonAction" style="margin-left: auto; display: none">Valider le block</button>
            </div>
        </div>

        <div id="loaderService" style="display:none; width: 100%; height: 100%;">
            <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="position: fixed; top: 50%; left: 50%; transform: translate(-25%, -25%);">
        </div>
    </section>
    {{ macro_popup.popup_info_validator() }}
    {{ macro_popup.popup_blocked_validator() }}
    {{ macro_popup.popup_go_back_prerequisite(serviceCreatedOnProject) }}
    <script type="application/javascript">
        // GLOBALS VARS
        let checkUndisplayStepURI = "{{ path('rule_engine_step_check_undisplay') }}";
        let getStepMacroURI = "{{ path('rule_engine_step_get_macro') }}";
        let saveResponseForServiceCustomerURI = "{{ path('service_created_responses_save') }}";
        let applyPostTreatmentURI = "{{ path('rule_engine_step_apply_post_treatment') }}";
        let getNextStepURI = "{{ path('rule_engine_front_step_next') }}";
        let checkValidatorURI = "{{ path('rule_engine_validator_check') }}";
        let getStepURI = "{{ path('rule_engine_step_get', { id : "stepId" }) }}";
        let setVersionBlockURI = "{{ path('cdc2_set_version', {id: "scopId"}) }}";
        let getFirstStepOfBlockURI = "{{ path('cdc2_first_step_of_block') }}";

        let serviceCustomerId = {{ serviceCreatedOnProject.id }}; // Service CDC2
        let cdcServiceCustomerId = {{ cdcServiceCreated.id }}; // Service CDC original pour le flow
        let serviceCreatedByCID = {{ cdcServiceCreated.id }}; // Service à utiliser pour le flux des étapes
        let stepIdToDisplay = {{ stepToDisplay.id }}; // Première étape du service CDC
        let serviceREId = {{ cdcServiceCreated.serviceRE.id }}; // ID du service Rule Engine de CDC

        let isFirst = true;
        let isFromAdrCorrector = false;
        let firstStepOfSection = stepIdToDisplay;
        let hasDisplayedFirstStepCorrector = false;
        let displayWet = false;
        let nbResponseNotUndisplay = 0;

        let subtitleBlock = "";
        let navigation = {{ navigation|json_encode|raw }};

        $(document).ready(function () {
            displayNavigation(navigation);
            isFirstLoad = true;
            previousStepId = stepIdToDisplay;
            checkUndisplayStepBeforeLoadIt(stepIdToDisplay);
        });
    </script>
{% endblock %}