{% 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>
            .summary-smoke-duct .info-service,
            .table-result-detail-summary .info-service,
            .summary-connecting-duct .info-service,
            .summary-air-supply .info-service,
            .device-summary .info-service {
                background-color: #b3b3b3;
                color: #b3b3b3;
                border-radius: 3px;
            }
            .blockDemo {
                border: 1px solid orange;
                display: block;
                padding: 2rem;
                text-align: center;
                border-radius: 3px;
            }
        </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;margin-bottom: 50px;" 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;margin-bottom: 50px;" 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 }}
            {{ app.request.get('displayWet') == 1 and serviceCreatedOnProject.project.techDataValueForService('displayWet') == 1 ? 'consultatif WET' : '' }}
            <div id="loaderService" style="display:none;">
                <img src="{{ asset('images/loader-service.gif') }}" alt="Loader" style="width: 90px;margin-top: -30px;">
            </div>
        </h2>
        {% if app.request.get('displayWet') == 1 and serviceCreatedOnProject.project.techDataValueForService('displayWet') == 1 %}
            <p style="font-size: 14px;margin-top: 30px; margin-bottom: -15px;">Service consultatif : le DTU 24.1 impose
                depuis octobre 2020 le calcul en dry
                pour les appareils à buches.<br> Le calcul effectué sur cette page respecte uniquement la norme EN 13
                384-1. </p>
        {% endif %}
        <h3 class="title-results" style="margin-top: 30px">
            Synthèse du service
        </h3>
    </div>

    {% set address = project.defaultAddress %}
    <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/_block/_installation.html.twig') }}
                </div>
            </div>
            <div class="container-summary" style="margin-top: 20px;gap: 0">
                <h4 class="subtitle-summary" style="margin-bottom: 0">
                    {% if isDemo %}
                        RÉSULTATS DU CALCUL DE DÉMONSTRATION
                    {% else %}
                        RÉSULTATS DU CALCUL
                    {% endif %}
                </h4>
                <div class="block-summary">
                    {{ include('summary/aac_cdc/_result_calcul.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionDetail" class="section-dropdown">
                    <h3 class="subtitle-summary">DÉTAILS DES RÉSULTATS</h3>
                    <button id="btnDisplayDetail">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentDetail" class="container-summary section-dropdown-content">
                    <br>
                    {% for label,detailCombustible in detail %}
                        <h5 class="subtitle-combustible-summary">{{ label }}</h5>
                        {{ include('summary/aac_cdc/_result_detail.html.twig') }}
                    {% endfor %}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionDevice" class="section-dropdown">
                    <h3 class="subtitle-summary">APPAREIL</h3>
                    <button id="btnDisplayDevice">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentDevice" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/_block/_device.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionAirSupply" class="section-dropdown">
                    <h3 class="subtitle-summary">AMENÉE D'AIR COMBURANT</h3>
                    <button id="btnDisplayAirSupply">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentAirSupply" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/aac_cdc/_air_supply.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionConnectingDuct" class="section-dropdown">
                    <h3 class="subtitle-summary">CONDUIT DE
                        RACCORDEMENT {{ project.techDataValueForService('idModeleConnectingDuctSecond') and project.techDataValueForService('idModeleConnectingDuct') ? 'DEUX SECTIONS' : '' }}</h3>
                    <button id="btnDisplayConnectingDuct">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentConnectingDuct" class="container-summary section-dropdown-content">
                    <br>
                    {% if project.techDataValueForService('idModeleConnectingDuctSecond') %}
                        {{ include('summary/aac_cdc/_connecting_duct.html.twig') }}
                    {% else %}
                        <span>Pas de conduit de raccordement</span>
                    {% endif %}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionSmokeDuct" class="section-dropdown">
                    <h3 class="subtitle-summary">CONDUIT DE FUMÉE {{ project.techDataValueForService('stateSmokeDuct') === 'exist' ? 'EXISTANT' : 'À CRÉER' }}</h3>
                    <button id="btnDisplaySmokeDuct">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentSmokeDuct" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/aac_cdc/_smoke_duct.html.twig') }}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#sectionDetail').on('click', () => {
            showHideSection($('#contentDetail').css('max-height') !== '0px' ? 'hide' : 'show', 'Detail');
        });
        $('#sectionDevice').on('click', () => {
            showHideSection($('#contentDevice').css('max-height') !== '0px' ? 'hide' : 'show', 'Device');
        });
        $('#sectionAirSupply').on('click', () => {
            showHideSection($('#contentAirSupply').css('max-height') !== '0px' ? 'hide' : 'show', 'AirSupply');
        });
        $('#sectionConnectingDuct').on('click', () => {
            showHideSection($('#contentConnectingDuct').css('max-height') !== '0px' ? 'hide' : 'show', 'ConnectingDuct');
        });
        $('#sectionSmokeDuct').on('click', () => {
            showHideSection($('#contentSmokeDuct').css('max-height') !== '0px' ? 'hide' : 'show', 'SmokeDuct');
        });

        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 %}