{% 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>
            .infoCompl .info-service,
            .habitation-report .info-service,
            .air-supply-report .info-service,
            .coform-report .info-service,
            .materiel-report .info-service{
                background-color: #b3b3b3;
                color: #b3b3b3;
                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;" 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 %}
    <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">
                <h4 class="subtitle-summary">INFORMATIONS COMPLÉMENTAIRES</h4>
                <div class="block-summary infoCompl">
                    <div>
                        <span>Informations client :</span>
                        <span class="info-service">
                            {{ serviceCreatedOnProject.serviceDataValueKey('InfoClient.info01') ?? serviceCreatedOnProject.serviceDataValueKey('InfoClient') }}
                        </span>
                        <br>
                        <span>Informations installateur :</span>
                        <span class="info-service">
                            {{ serviceCreatedOnProject.serviceDataValueKey('Infoinstallateur.info01') ?? serviceCreatedOnProject.serviceDataValueKey('Infoinstallateur') }}
                        </span>
                    </div>
                    <div>
                        <button class="boutonAction" id="editInfos">
                            Modifier les informations
                        </button>
                    </div>
                </div>
                <form id="complementaryInfosForm" style="display: none; padding: 2rem">
                    <textarea name="textInfos" id="textInfos" cols="30" rows="5" style="width: 100%; resize: none"></textarea>
                    <div style="display: flex; justify-content: center;">
                        <img id="loader" src="{{ asset('install-bois/icon/loader.svg') }}" alt="Chargement..." style="width: 100px; display: none">
                    </div>
                    <div id="infosOption" style="display: flex; gap:2rem; justify-content: end; align-items: center">
                        <span id="errorInfosForm" style="color: red; display: none">Veuillez sélectionner au moins une option</span>
                        <label for="radioClient" style="display: flex; align-items: center; gap: 1rem; margin: 0; cursor: pointer">
                            <span>
                                Client
                            </span>
                            <input type="radio" name="typeInfos" id="radioClient" value="client" style="margin: 0">
                        </label>
                        <label for="radioInstallateur" style="display: flex; align-items: center; gap: 1rem; margin: 0; cursor: pointer">
                            <span>
                                Installateur
                            </span>
                            <input type="radio" name="typeInfos" id="radioInstallateur" value="installateur" style="margin: 0">
                        </label>
                        <button class="boutonAction" type="submit">Sauvegarder</button>
                    </div>
                </form>
            </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="sectionHome" class="section-dropdown">
                    <h3 class="subtitle-summary">HABITATION & INSTALLATION DE L'APPAREIL</h3>
                    <button id="btnDisplayHome">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentHome" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/rtp/_home_installation.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionAirSupply" class="section-dropdown">
                    <h3 class="subtitle-summary">AMENÉE D'AIR & CONDUIT DE FUMÉE</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/rtp/_air_supply_smoke_duct.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionConform" class="section-dropdown">
                    <h3 class="subtitle-summary">REHAUSSE & DISTANCES DE SÉCURITÉ</h3>
                    <button id="btnDisplayConform">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentConform" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/rtp/_coform_security_distance.html.twig') }}
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div id="sectionMateriel" class="section-dropdown">
                    <h3 class="subtitle-summary">MATÉRIEL & ADOSSEMENT</h3>
                    <button id="btnDisplayMateriel">
                        <h4 class="button-show-hide">voir</h4>
                        <div class="triangle-dropdown"></div>
                    </button>
                </div>
                <div id="contentMateriel" class="container-summary section-dropdown-content">
                    <br>
                    {{ include('summary/rtp/_materiel_floor.html.twig') }}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#sectionDevice').on('click', () => {
            showHideSection($('#contentDevice').css('max-height') !== '0px' ? 'hide' : 'show', 'Device');
        });
        $('#sectionHome').on('click', () => {
            showHideSection($('#contentHome').css('max-height') !== '0px' ? 'hide' : 'show', 'Home');
        });
        $('#sectionAirSupply').on('click', () => {
            showHideSection($('#contentAirSupply').css('max-height') !== '0px' ? 'hide' : 'show', 'AirSupply');
        });
        $('#sectionConform').on('click', () => {
            showHideSection($('#contentConform').css('max-height') !== '0px' ? 'hide' : 'show', 'Conform');
        });
        $('#sectionMateriel').on('click', () => {
            showHideSection($('#contentMateriel').css('max-height') !== '0px' ? 'hide' : 'show', 'Materiel');
        });

        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'));
        }

        let form = $('#complementaryInfosForm')
        $('#editInfos').on('click', function () {
            form.toggle()
            if (form.is((':visible'))) {
                $('#editInfos').text('Annuler la modification')
            } else {
                $('#editInfos').text('Modifier les informations')
            }
        })

        form.on('submit', function (event) {
            event.preventDefault();
            $('#errorInfosForm').hide()
            $('#textInfos').hide()
            $('#infosOption').hide()
            $('#loader').show()

            $.ajax({
                type: "POST",
                url: "{{ path('summary_edit_rtp', {id: serviceCreatedOnProject.id}) }}",
                data: $(this).serialize(),
                success: function() {
                    $('#textInfos').val('');
                    $('input[name="typeInfos"]').prop('checked', false);
                    window.location.reload()
                },
                error: function(error) {
                    console.error("Erreur:", error);
                    $('#loader').hide()
                    $('#textInfos').show()
                    $('#infosOption').show()
                    $('#errorInfosForm').show()
                }
            });
        })
    </script>
{% endblock %}