{% import "forms-macro/popup.html.twig" as popup %}
{% import "rule_engine/macro/service_diagram_block_macro.twig" as diagram_macro %}
<style>
    {% if is_granted('ROLE_DEMO') %}
    .blockDemo {
        margin-top: 10px;
        border: 1px solid orange;
        display: block;
        padding: 35px;
        text-align: center;
        border-radius: 3px;
    }
    {% endif %}
</style>
<div class="containerRtpDeper">
    <div style="color: #fca43b; font-size: 2.5rem">
        RÉSULTATS
        <br>
        Estimation des déperditions thermiques
        <div class="orange-text" style="margin-top: 1.5rem">
            {% if is_granted('ROLE_DEMO') %}
                <span style="background-color: #b1b1b1; color: #b1b1b1; border-radius: 3px">XXX</span>
                <span style="margin-left: .5rem">kW</span>
            {% else %}
                {{ (serviceCreatedOnProjectCurrent.serviceDataValueKey('DeperResultat')|floatval)|number_format(2, '.', '') }} kW
            {% endif %}
        </div>
        <div style="background-color: #3bd5ff; color: black; width: 250px; height: fit-content; margin: 2rem auto 0 40%"
             class="button-results hideOnSmartphone" id="validResults1">
            <h3 style="font-size: 1.5rem; margin: 0">Enregistrer mes données définitivement et visualiser la
                synthèse</h3>
        </div>
    </div>
    <div style="display: flex; row-gap: 10px; flex-wrap: wrap; max-width: 300px">
        <div style="background-color: #3bd5ff;" class="button-results" id="validResults2">
            <h4>Valider</h4>
            <span>Valider le relevé et voir la synthèse</span>
        </div>
        <div style="background-color: #fc971f;" class="button-results" id="newProject">
            <h4>Créer une nouvelle étude</h4>
        </div>
    </div>
</div>
{% if not is_granted('ROLE_DEMO') %}
    {{ diagram_macro.createMyDataService(responsesBySubTitleAndQuestion,MIexist,serviceCreatedOnProjectCurrent) }}
{% else %}
    {{ include('watermark/_watermark.html.twig') }}
    {{ include('tooltip/tooltip.html.twig') }}
    <h3 class="orange-text">Modifier mes données</h3>
    <p class="blockDemo">Avec votre abonnement, vous pourrez modifier vos réponses ici.</p>
{% endif %}
{% if MIexist %}
    <div class="modal fade" id="modal-MI">
        <div class="modal-dialog popup" style="width: 80%;">
            <div class="modal-content popup-border-radius">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin: 15px">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ include('summary/moninstallation/data.html.twig') }}
            </div>
        </div>
    </div>
{% endif %}
{{ popup.popup_duplicate_project(project.id, true) }}
<script type="text/javascript"
        src="{{ asset('install-bois/improveResultCDC/httpServiceRequestImproveResultCDC.js') }}"></script>
<script type="text/javascript">
    let scopId = {{ serviceCreatedOnProjectCurrent.id }};
    const validDeperURL = "{{ path('service_created_on_project_validateDeper', {"id": "00"}) }}";
    const summaryService = "{{ path('summary_index', {"id": "00"}) }}";

    $('#newProject').on('click', function () {
        $('#popup-duplicate-project').modal('show');
    });

    $('#validResults1, #validResults2').on('click', function () {
        $.ajax({
            url: validDeperURL.replace("00", scopId),
            type: 'POST',
            success: function (response) {
                console.log('Réponse du serveur :', response);
                window.location.href = summaryService.replace("00", scopId)
            },
            error: function (error) {
                console.error('Erreur :', error);
            }
        });
    })
    if (isDemo) {
        applyTooltipToDisabledElements('#newProject');
    }
</script>