{% 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/prerequisite/main_prerequisite.css') }}">
{% endblock %}

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

{% block page_content_start %}
    {% set firstStepClass = "titre_ecran_process_termineeStart" %}
    {% set secondStepClass = "titre_ecran_process_terminee" %}
    {% set thirdStepClass = "titre_ecran_process_Encours" %}
    {% set fourthStepClass = "titre_ecran_process_Arealisee" %}
    {% set fromPrerequisiteAdrOr = true %}
    {% set serviceCreatedOnProject =serviceCustomer %}
    <div class="containerInfosProjectSimple">
        {{ parent() }}
        {{ include('project/_block/project_infos_simple.html.twig') }}
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid" id="containerPrerequisite">
        <div class="row">
            <h3 id="subTitleInstallationType" style="display:none;margin: 0 0 0 66px; color:#FC971F"></h3>
            <div id="_blockChoiceDiameterConnectingDuct" class="col-sm-12 col-md-12 col-lg-12"
                 style="display: none;margin-left: 40px;">
                <div style="display:flex;flex-wrap:wrap">
                    <div style="margin-right:15px">
                        <h4>Conduit de raccordement : Nombre de sections de diamètre différent</h4>
                    </div>
                    <div class="container-nbOfDiameterConnectingDuct">
                        <select id="nbOfDiameterConnectingDuct" name="nbOfDiameterConnectingDuct">
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="containerBlockImgForm">
                <div style="height: 400px;max-width: 300px;margin:auto;display: none" id="install">
                    <img style="height: 100%" src="">
                </div>
                {% if serviceCustomer.project.prerequisiteProcessDone != true or isTesting == true %}
                    <div id="_blockChoiceDevice" class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                         style="display: block;padding: 0 3% 0 3%;margin-top: -38px;width: 100%">
                        {{ include('rule_engine/prerequisite/_block/_choice_device.html.twig') }}
                    </div>
                    <div id="_blockChoiceInstallationType"
                         class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                         style="display: none;padding: 0 3% 0 3%;">
                        {{ include('rule_engine/prerequisite/_block/_choice_installation_type.html.twig') }}
                    </div>
                    <div id="_blockChoiceSubInstallationType"
                         class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                         style="display: none;padding: 0 3% 0 3%;">
                        {{ include('rule_engine/prerequisite/_block/_choice_sub_installation_type.html.twig') }}
                    </div>
                {% endif %}
                <div id="_blockChoiceTubageCoudeParent"
                     class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                     style="
                     {% if serviceCustomer.project.prerequisiteProcessDone != true or isTesting == true %}
                             display: none;
                     {% endif %}
                             padding: 0 3% 0 3%;">
                    {{ include('rule_engine/prerequisite/_parent_block/_parent_tubage_coude_block.html.twig') }}
                </div>
                <div id="_blockChoiceSmokeDuctParent"
                     class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                     style="display: none;padding: 0 3% 0 3%;">
                    {{ include('rule_engine/prerequisite/_parent_block/_parent_smoke_duct_block.html.twig') }}
                </div>
                <div id="_blockChoiceConnectingDuctCoudeTeParent"
                     class="col-sm-12 col-md-12 col-lg-12 containerPrerequisiteSmartphone"
                     style="display: none;padding: 0 3% 0 3%;">
                    {{ include('rule_engine/prerequisite/_parent_block/_parent_connecting_duct_block.html.twig') }}
                </div>
            </div>
        </div>
        <div id="popup-container">
            {{ popup.popup_end_prerequisite() }}
            {{ popup.popup_prerequisite_dtu_coude_te() }}
            {{ popup.popup_prerequisite_sum_angles() }}
            {{ popup.popup_prerequisite_coude_smoke_duct() }}
            {{ popup.simple_popup('info',null,null,null,'popup-cdr-inf-sup',true) }}
            {{ popup.simple_popup('info','Vous venez de sélectionner un conduit NON résistant au feu de cheminée (classe “O”) donc non conforme au DTU.',null,null,'popup-classe-o',true) }}
            {{ popup.simple("info"," Le DTU 24.2 permet un prolongement bas d’un conduit de fumée existant avec un 3e coude afin
                            de traverser la paroi d’adossement et permettre son débouché dans la pièce où se trouve
                            l’appareil.",null,null,'coude3CF-popup') }}
            {{ popup.simple_popup("danger","Vous venez de renseigner une épaisseur de paroi du conduit maçonné potentiellement atypique.",null,null,"popup_notNormal",true) }}
            {{ popup.simple("danger","",null,null,"popup_errorDiameterForbidden") }}
            {{ popup.simple_popup("danger","",null,null,"popup_errorDiameter",true) }}
            {{ popup.simple_popup("info","Le CPT 3708_V3 (§ 3.5.1.2) interdit tout dévoiement hors le coude à 90° pour la traversée du mur et l'éventuel Té en pied de conduit.",null,null,'coude2CFA4-popup',true) }}
        </div>
        {% if serviceCustomer.project.prerequisiteProcessDone == true or isResume %}
            {{ popup.simple("danger","Impossible de modifier l'appareil et l'installation. Vous avez déjà validé cette partie." ) }}
        {% endif %}
        {{ popup.simple_popup("info","Attention, en choisissant 2 sections de conduit de raccordement, cette installation ne sera pas conforme au DTU.",null,null,'confirm-popup-2CDR',true) }}
    </div>
    <div id="productParametersArray" style="display: none"
         data-productParameters="{{ productParametersProvider|json_encode()|convert_encoding('UTF-8', 'UTF-8') }}"></div>
    <script type="application/javascript">
        const prerequisiteProcessDone = {{ serviceCustomer.project.prerequisiteProcessDone is defined ?
        (serviceCustomer.project.prerequisiteProcessDone ? "true" : "false")
        : "false" }};

        const CASE ={{ prerequisiteMatrix["CASE"]| json_encode | raw }};
        const SUBCASE ={{ prerequisiteMatrix["SUBCASE"]| json_encode | raw }};
        const TUBAGE ={{ prerequisiteMatrix["TUBAGE"]| json_encode | raw }};
        const COUDE_TUBAGE ={{ prerequisiteMatrix["COUDE_TUBAGE"]| json_encode | raw }};
        const DUCT_METALLIC ={{ prerequisiteMatrix["DUCT_METALLIC"]| json_encode | raw }};
        const COUDE_TE_SMOKE_DUCT ={{ prerequisiteMatrix["COUDE_TE_SMOKE_DUCT"]| json_encode | raw }};
        const CONNECTING_DUCT1 ={{ prerequisiteMatrix["CONNECTING_DUCT1"]| json_encode | raw }};
        const CONNECTING_DUCT2 ={{ prerequisiteMatrix["CONNECTING_DUCT2"]| json_encode | raw }};
        const LIBELLE_CASE ={{ prerequisiteMatrix["LIBELLE_CASE"]| json_encode | raw }};
        const INFO_DUCT_MACONNE ={{ prerequisiteMatrix["INFO_DUCT_MACONNE"]| json_encode | raw }};
        const TWO_COUDES_TUBAGE ={{ prerequisiteMatrix["TWO_COUDES_TUBAGE"]| json_encode | raw }};
        const TWO_COUDES_SMOKE_DUCT ={{ prerequisiteMatrix["TWO_COUDES_SMOKE_DUCT"]| json_encode | raw }};
        const TWO_COUDES_WITH_CREATE_SMOKE_DUCT ={{ prerequisiteMatrix["TWO_COUDES_WITH_CREATE_SMOKE_DUCT"]| json_encode | raw }};
        const INIT_COUDE2_SAME_COUDE1 ={{ prerequisiteMatrix["INIT_COUDE2_SAME_COUDE1"]| json_encode | raw }};
        const BIS_IS_AVAILABLE_FOR_IMAGE ={{ prerequisiteMatrix["BIS_IS_AVAILABLE_FOR_IMAGE"]| json_encode | raw }};
        const INCOMPATIBILITY_REASON = Object.entries({{ prerequisiteMatrix["INCOMPATIBILITY_REASON"]| json_encode | raw }});

        const TECH_DATA_SERVICE = {{ techData| json_encode | raw }};
        const IS_RESUME = {{ isResume ? "true" : "false" }};

        let isTesting = false;
        {% if isTesting == true %}
        isTesting = true;
        {% endif %}

        // GLOBAL VARS
        let brandListURI = "{{ path('brand_list', { "fromPrerequisite" : "true"}) }}";
        let saveBrandURI = "{{ path('brand_add_or_update_ajax') }}";
        let productListByParamsURI = "{{ path('products_list_by_params') }}";
        let addOrUpdatePrerequisiteURI = "{{ path('rule_engine_prerequisite_add_update_informations') }}";
        let getProductURI = "{{ path('products_get_by_id', { id : 0 }) }}";
        let productDeviceSelected = null;
        let deviceSelected = null;
        let typeOfProduct = null;
        let serviceCustomerId = {{ serviceCustomer is defined ?  serviceCustomer.id : "null" }};
        let serviceReID = {{ serviceCustomer is defined ?  serviceCustomer.serviceRE.id : "null" }};
        let createOrDuplicateMissingProductURI = "{{ path("products_create_or_duplicate") }}";
        let isBigPN = null;
        let projectViewURI = "{{ path('project_edit', {'id': project.id}) }}";

        let installPath = "{{ asset('install-bois/rule-engine/front/pictures') }}";

        let idMarque = null;
        let assetValidProductImg = "{{ asset('install-bois/icon/appareil_valideIB.png') }}";
        let assetNotValidProductImg = "{{ asset('install-bois/icon/appareil_non_valideIB.png') }}";
        let varianteDevice = null;
        // Installation type Block
        let installationTypeSelected = null;
        let installationType = null;

        // Sub Installation type Block
        let subInstallationTypeSelected = null;

        let ruleEngineServiceEndTestURI = "{{ path('rule_engine_front_end_test', {"id" : "id", "serviceCustomer" : "serviceCustomerId"}) }}";
        let ruleEngineServiceStartProdURI = "{{ path('service_created_on_project_start', {"id" : "id"}) }}";

        let tubageNeedReload = true;
        let smokeDuctNeedReload = true;
        let connectingDuctNeedReload = true;

        let techData ={{ techData| json_encode | raw }};
        if (prerequisiteProcessDone !== '1') {
            // callback function to manage new brand callback - Here it's the first step, so for device form
            let callbackNewBrandFunction = unDisplayProductBrandFormIntoDeviceSection;
            let callbackNewModeleFunction = unDisplayProductDuplicateModeleFormIntoDeviceSection;
        }

        let diametreValueIsOk = false;
        let currentFormId = null;

        let processPath = ["#_blockChoiceDevice", "#_blockChoiceInstallationType", "#_blockChoiceSubInstallationType"];

        let smokeDuctIsMaconne = null;
        let displayCdr = null;
        let canShowCdr1 = false;
        let canShowCdr2 = false;
        let cdr2IsDisplay = false;
        let coudeToCheck = [];
        let teToCheck = [];
        let specialTe = false;

        let diameterIsInvalidIsCheck = false;
        let coude2OnA4IsCheck = false;
        let angleCoudeIsNotSameIsCheck = false;
        let idTubage = techData?.idModeleTubage ?? null;
        let idSmokeDuct = techData?.idModeleSmokeDuct ?? null;

        const favoriteBrandURI = "{{ path('brand_favorite', { "brandId" : "00"}) }}";
        const favoriteProductURI = "{{ path('products_favorite', { "id" : "00"}) }}";

    </script>
    <script type="text/javascript"
            src="{{ asset('install-bois/prerequisite/main_prerequisite.js') ~ "?rnd=" ~ random() }}"></script>
{% endblock %}