{% extends '@InstallBois/index.html.twig' %}

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

{% block page_content_start %}
    {{ parent() }}
    {{ include('project/_block/project_infos.html.twig') }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {% if isDemo %}
        <style>
            .result-deper-value .info-service {
                background-color: #b3b3b3;
                color: #b3b3b3;
                border-radius: 3px;
                font-size: 2rem;
            }
        </style>
    {% endif %}
{% endblock %}

{% block page_content %}
    {% if isDemo %}
        {{ include('watermark/_watermark.html.twig') }}
    {% endif %}
    <div class="col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 2%">
        {% if serviceCreatedOnProject.serviceRE.logoFilepath == null %}
            <img style="margin-left: 2%;margin-top: 20px;" alt="Logo du service" id="logoService"
                 class="logoServiceConfig"
                 src="{{ asset('install-bois/icon/service/default_settings_icon.png') }}">
        {% else %}
            <img style="margin-left: 2%;margin-top: 20px;" alt="Logo du service" id="logoService"
                 class="logoServiceConfig"
                 src="{{ asset(serviceCreatedOnProject.serviceRE.logoFilepath) }}">
        {% endif %}
        <h2 style="margin-bottom: -30px;display: flex;align-items: flex-start;justify-content: flex-start;align-content: center;">
            {{ serviceCreatedOnProject.serviceRE.label }}
            <div id="loaderService" style="display:none;">
                <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 90px;margin-top: -30px;">
            </div>
        </h2>
        <h3 class="title-results" style="margin-top: 30px">
            Synthèse du service
        </h3>
    </div>

    {% set address = project.defaultAddress %}
    {% set after2013 = serviceCreatedOnProject.serviceDataValueKey('AnnéeConstru') in ['À partir de 2022 - RE 2020', '2013-2021 - RT 2012 ou BBC'] %}
    <div class="container-fluid">
        <div class="row parent-container-summary">
            <div class="container-summary">
                <h4 class="subtitle-summary">INSTALLATION</h4>
                <div class="block-summary">
                    {{ include('summary/deperditionthermique/_installation.html.twig') }}
                </div>
            </div>
            <div class="container-summary" style="margin-top: 20px;">
                <h4 class="subtitle-summary">
                    RÉSULTATS{{ after2013 and serviceCreatedOnProject.serviceDataValueKey('AmeIsoExt') ? '*' : '' }}<br>
                    Estimation des déperditions thermiques de l’habitation
                </h4>
                <div class="result-deper-value">
                    {% if serviceCreatedOnProject.serviceDataValueKey('DeperResultat') %}
                        <span class="info-service">
                            {{ (serviceCreatedOnProject.serviceDataValueKey('DeperResultat')|floatval)|number_format(2, '.', '') }}
                        </span>
                        <span style="margin-left: .5rem; font-size: 1.5rem">kW</span>
                    {% endif %}
                </div>
                <div>
                    {% if after2013 %}
                        <span style="color: #fc971f">*</span>
                        {% if serviceCreatedOnProject.serviceDataValueKey('AmeIsoExt') %}
                            <span>La valeur est indicative.</span>
                        {% else %}
                            <span>Valeur indicative indisponible - service arrêté à la demande de l’utilisateur.</span>
                        {% endif %}
                        <br><span>Pour les maisons construites selon la RT2012 ou RE2020, la déperdition thermique a été calculée dans l’étude thermique préalable à la construction de la maison qui fait office de valeur officielle.</span>
                    {% endif %}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionInfo" class="section-dropdown">
                    <h3 class="subtitle-summary">INFORMATIONS GÉNÉRALES</h3>
                    <button id="btnDisplayInfo">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentInfo" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/deperditionthermique/_general_informations.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionImprovement" class="section-dropdown">
                    <h3 class="subtitle-summary">CARACTÉRISTIQUES DE L'INSTALLATION</h3>
                    <button id="btnDisplayImprovement">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentImprovement" class="container-summary section-dropdown-content">
                    <br>
                    {% if
                        serviceCreatedOnProject.serviceDataValueKey('AmeIsoExt') and
                        serviceCreatedOnProject.serviceDataValueKey('AmeIsoExt') != 'Non, et je souhaite faire le calcul avec le coefficient G'
                    %}
                        {{ include('summary/deperditionthermique/_improvements.html.twig') }}
                    {% else %}
                        <span>Vous n’avez renseigné aucune caractéristique.</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#sectionInfo').on('click', () => {
            showHideSection($('#contentInfo').css('max-height') !== '0px' ? 'hide' : 'show', 'Info');
        });
        $('#sectionImprovement').on('click', () => {
            showHideSection($('#contentImprovement').css('max-height') !== '0px' ? 'hide' : 'show', 'Improvement');
        });

        function showHideSection(type, element) {
            let content = $('#content' + element);
            let section = $('#section' + element);
            $('#btnDisplay' + element + ' > .triangle-dropdown').css('transform', 'rotate(' + (type === 'hide' ? '0' : '180') + 'deg)');
            $('#btnDisplay' + element + ' > .button-show-hide').text(type === 'hide' ? 'voir' : 'réduire');
            section.css('background-color', (type === 'hide' ? 'transparent' : '#FED7A8'));
            section.css('border', (type === 'hide' ? '2px solid #fc971f' : 'none'));
            content.css('max-height', type === 'hide' ? 0 : content.prop('scrollHeight'));
        }
    </script>
{% endblock %}