{% import "forms-macro/popup.html.twig" as popup %}
{% import "forms-macro/inputs_form.html.twig" as input %}
{% 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 %}
    .title-results-container {
        margin-left: 1rem;
    }
    .title-results-container .title-results, .title-results-container p {
        margin-left: 5rem;
    }
    .containerMydataService {
        margin-top: 6rem;
    }
    @media screen and (max-width: 993px) {
        .title-results-container .title-results, .title-results-container p {
            margin-left: 2rem;
        }
        .containerMydataService {
            margin-left: 2.5rem !important;
        }
        .container-legend-result {
            margin-left: .5rem;
        }
        .container-button-results {
            margin-left: 2rem;
            padding: 0;
            width: 90%;
        }
    }

</style>

{% set noDiameter = buseDiameters is empty %}
<div class="title-results-container" style="margin-bottom: 2%;">
    <h3 class="title-results" style="margin-top: 30px;">
        {% if type ends with "SC" %}
            Résultats du calcul pour le conduit {{ ductMaterial|lower }}
        {% else %}
            Résultats du calcul pour les conduits {{ infosConfig['brandDuct'] }}, {{ infosConfig['modelDuct'] }}
        {% endif %}
    </h3>
    <p style="{{ existantDiameterFormatted is null ? 'display:none' : '' }}">
        Pour rappel, votre conduit existant est de {{ existantDiameterFormatted }}.
    </p>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-md-8 col-lg-8">
            <div class="container-legend-result">
                <div class="block-legend-result">
                    <div class="positive-legend-result"></div>
                    <p>calcul conforme selon la norme EN 13384-1</p>
                </div>
                <div class="block-legend-result">
                    <div class="negative-legend-result"></div>
                    <p>calcul non conforme</p>
                </div>
            </div>
            {% if is_granted('ROLE_DEMO') %}
            {% endif %}
            <form id="formDiameter" method="post"
                  action="{{ path('service_created_on_project_validate_diameter', {'id': serviceCreatedOnProjectCurrent.id, 'displayWet': app.request.get('displayWet') == 1 and project.techDataValueForService('displayWet') == 1}) }}"
                  style="display: flex;gap: 5rem; margin-left: 5rem">
                <div style="width: 100%">
                    <h3 class="title-results"
                        style="margin-top: 0;margin-bottom: 5%;{{ has2Buses ? '' : 'white-space: nowrap;' }}">
                        {{ type === 'TMRECTANGLESC' ? 'Dimension' : 'Diamètre' }} du {{ conduitType }}
                    </h3>
                    {% if noDiameter %}
                        {{ popup.popup_no_diameter() }}
                    {% else %}
                        <div style="display:flex;justify-content: space-between;width: 100%;gap: 10rem;">
                            {% for buse, diameters in buseDiameters %}
                                <div style="flex:1">
                                    {% if has2Buses is not empty %}
                                        <h3 style="margin-bottom: 2rem;" class="title-results">Buse {{ buse }}</h3>
                                    {% endif %}
                                    {% if otherDiameter[buse] is defined %}
                                        <div style="margin-bottom: 2rem;width: fit-content;">
                                            {{ input.adrDiameterInput(otherDiameter[buse], otherDiameter[buse]['diameter'], type, isBigPN, choixAACForfait, buse) }}
                                        </div>
                                    {% endif %}
                                    <div class="container-diameter-results">
                                        {% for diameter, data in diameters %}
                                            {{ input.adrDiameterInput(data, diameter, type, isBigPN, choixAACForfait, buse) }}
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div style="margin-top: 50px; display: flex; gap: 20px">
                            <div class="buttonZcal">
                                <a target="_blank" href="https://zcal.co/margot-twitchin/cv-perfectionnement"
                                   class="w-full" style="color: white">
                                    <img src="{{ asset('install-bois/icon/graduation-cap-solid.svg') }}"  class="hideOnSmartphone"/>
                                    <div>
                                        <span><b>Besoin d’accompagnement pour interpréter ?</b></span>
                                        <br>
                                        <span>Je réserve ma formation à l’interprétation des résultats  ici</span>
                                    </div>
                                </a>

                            </div>
                            <a class="boutonAction faqBtn" target="_blank" href="{{ asset('/install-bois/faq/ADR - comprendre mon écran.pdf') }}" style="margin: 0; text-align: center; align-content: center">Voir la FAQ</a>
                        </div>
                    {% endif %}
                </div>
            </form>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4 container-button-results">
            {% if noDiameter == false %}
                <div style="background-color: #3bd5ff" class="button-results" id="validResults">
                    <h4>Valider</h4>
                    <span>Valider le diamètre sélectionné et visualiser la note de synthèse</span>
                </div>
            {% endif %}
            <div class="container-other-button-results" id="otherActions">
                <div class="button-results" id="btnOtherDiameter">
                    <h4>Choisir un autre diamètre</h4>
                    <span id="sentenceDiameter"></span>
                    <form action="{{ path('service_created_on_project_create_diameter', {'id': serviceCreatedOnProjectCurrent.id}) }}"
                          method="post" id="formOtherDiameter" style="display: none">
                        {% if type === 'CC' || type === 'TP' %}
                            <div style="display: flex;flex-direction:column;">
                                <label for="otherDiameter" style="flex: 4">Saisir les diamètres souhaités :</label>
                                <div style="display: flex;align-items: baseline;">
                                    <input id="otherDiameter" type="number" name="otherDiameter"
                                           placeholder="intérieur" style="width: 100%">
                                    -
                                    <input id="otherDiameter2" type="number" name="otherDiameter2"
                                           placeholder="extérieur" style="width: 100%">
                                </div>
                            </div>
                        {% else %}
                            <div style="display: flex;align-items: baseline;">
                                <label for="otherDiameter" style="flex: 4">Saisir le diamètre souhaité :</label>
                                <input id="otherDiameter" type="number" name="otherDiameter"
                                       style="flex: 3;width: 100%">
                            </div>
                        {% endif %}
                        <div>
                            <button id="cancelBtn" type="button" class="boutonRetour pull-right">Annuler</button>
                            <button id="submitBtn" type="submit" class="boutonAction">Voir le résultat</button>
                        </div>
                    </form>
                </div>
                {% if noDiameter == false %}
                    <div class="button-results hideOnSmartphone" id="showDetails">
                        <h4>Voir les détails</h4>
                        <span>Afficher les détails pour le diamètre sélectionné</span>
                    </div>
                {% endif %}
                <a class="button-results" id="improveResults" style="display: none">
                    <h4>Correcteur de résultat</h4>
                    {% if not is_granted('ROLE_DEMO') %}
                        <span></span>
                    {% endif %}
                </a>
                {% if canGenerateWet and noDiameter == false %}
                    {{ popup.popup_generate_wet() }}
                    <div style="background-color: #d9d9d9" class="button-results" id="generateWet">
                        <h4>{{ app.request.get('displayWet') == 1 ? 'Revenir au calcul en DRY':'Générer un calcul consultatif en WET' }}</h4>
                        <form id="generateWetForm" method="post">
                            <input type="hidden" name="generateWet"
                                   value="{{ app.request.get('displayWet') == 1 ?'0':'1' }}">
                        </form>
                    </div>
                {% endif %}
            </div>
{#            <div style="background-color: #fc971f" class="button-results" id="newProject">#}
{#                <h4>Créer une nouvelle étude</h4>#}
{#            </div>#}
        </div>
    </div>
    {% if listError|length > 0 and is_granted('ROLE_ADMIN') %}
        <div>
            <h4>Liste des résultats impossibles à récupérer</h4>
            {% for key,error in listError %}
                {{ error }} erreur{{ error>1 ?"s":"" }} pour le diametre {{ key }}<br>
            {% endfor %}
        </div>
    {% endif %}
    {% if not is_granted('ROLE_DEMO') %}
        {{ diagram_macro.createMyDataService(responsesBySubTitleAndQuestion,true,serviceCreatedOnProjectCurrent) }}
    {% else %}
        {{ include('tooltip/tooltip.html.twig') }}
        {{ include('watermark/_watermark.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 %}
</div>
{{ include('project/_modal/_validate_negative_result.html.twig') }}
{{ include('project/_modal/_validate_diameter.html.twig') }}
{{ popup.simple_popup('info','Le diamètre sélectionné ne donne pas accès à la synthèse consultative en WET.','Confirmez vous votre choix ?',null,'noXmlWetAlert') }}
{{ popup.popup_duplicate_project(project.id, true) }}
<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>
{% set isMaconne = type starts with 'TM' %}
<script type="text/javascript"
        src="{{ asset('install-bois/improveResultCDC/httpServiceRequestImproveResultCDC.js') }}"></script>
<script type="application/javascript">
    const radioButtons = $('input[name="diameter"]');

    const selectDiameter = (element) => {
        if (element.checked) {
            uncheckOtherDiameter(element.value);
        }
    };

    const uncheckOtherDiameter = (diameterSelected) => {
        $.each(radioButtons, (key, input) => {
            if (input.value !== diameterSelected) {
                input.parentNode.style.outline = "none";
            } else {
                input.parentNode.style.outline = "10px solid #FED7A8";
            }
        });
    }

    $('#cancelBtn').on('click', function (event) {
        event.stopPropagation();
        $('#formOtherDiameter').hide();
        $('#btnOtherDiameter').css('height', '6.5rem');
    });

    if ("{{ newDiameterIsPossible|json_encode }}" === 'true') {
        $('#btnOtherDiameter').on('click', function () {
            $('#formOtherDiameter').show();
            $('#btnOtherDiameter').css('height', '14rem');
        });
        $('#sentenceDiameter').text('Saisir manuellement un diamètre');
    } else {
        $('#btnOtherDiameter').css('background-color', '#bfbab4');
        $('#sentenceDiameter').text('Fonctionnalité non disponible pour votre installation');
        $('#btnOtherDiameter').css('cursor', 'not-allowed');
        $('#btnOtherDiameter').attr('title', 'Diamètre non modifiable');
    }

    $('#noXmlWetAlert').find('.btnNextAction').on('click', () => {
        displayPopupValidate();
    });

    $('#validResults').on('click', function () {
        if ({{ hasNoXmlWetValid|json_encode|raw }}) {
            $('#noXmlWetAlert').modal('show');
        } else {
            displayPopupValidate();
        }
    });

    const displayPopupValidate = () => {
        let radio = $('input[name="diameter"]:checked');
        let isAACConfirmed = radio.attr('data-is-aac-confirmed');
        let isResultPositive = radio.attr('data-is-result-positive');
        let errorMessage = '';

        if (isAACConfirmed === 'false') {
            errorMessage = "L'AAC n'est pas valide pour le diamètre choisi.";
        }
        if (isResultPositive === 'false') {
            errorMessage = "Le résultat du calcul n’est pas conforme pour le diamètre choisi.";
        }
        if (isAACConfirmed === 'false' && isResultPositive === 'false') {
            errorMessage = "Le résultat du calcul et l'AAC ne sont pas conforme pour le diamètre choisi.";
        }
        if (isAACConfirmed === 'false' || isResultPositive === 'false') {
            $('#errorMessage').text(errorMessage);
            $('#modal-validate-result').modal('show');
        } else if (isAACConfirmed === 'true' && isResultPositive === 'true') {
            $('#modal-validate-diameter').modal('show');
        }
    }

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

    $('#showDetails').on('click', function () {
        let radio = $('input[name="diameter"]:checked');
        let target = '{{ path('service_created_on_project_show_result_diameter_detail', {'id': serviceCreatedOnProjectCurrent.id, 'diameter': 'XXDIAMETER', 'buse': 'XXBUSE', 'displayWet': app.request.get('displayWet') == 1}) }}';
        if (radio.val() != null) {
            target = target.replace('XXDIAMETER', radio.val().split('-')[0]);
            target = target.replace('XXBUSE', radio.val().split('-')[1]);
            window.open(target, '_blank', 'width=' + window.innerWidth + ',height=' + window.innerHeight);
        } else {
            alert('Veuillez sélectionner un diamètre');
        }
    });

    let canImproveDiameter = false
    $('#improveResults').on('click', function () {
        if (canImproveDiameter) {
            let radio = $('input[name="diameter"]:checked');
            let target = '{{ path('improve_result_index', {'serviceCreatedOnProject': serviceCreatedOnProjectCurrent.id, 'diameter': 'XXDIAMETER', 'buse': 'XXBUSE', 'displayWet': app.request.get('displayWet') == 1}) }}';
            if (radio.val() != null) {
                target = target.replace('XXDIAMETER', radio.val().split('-')[0]);
                target = target.replace('XXBUSE', radio.val().split('-')[1]);
                window.location.href = target;
            } else {
                alert('Veuillez sélectionner un diamètre');
            }
        }
    });

    $('input[name="diameter"]').click(function () {
        canImproveDiameter = false;
        let getCanBeImprovedURI = '{{ path('improve_result_can_be_improved',{serviceCreatedOnProject:serviceCreatedOnProjectCurrent.id,diameter:'XXDIAMETER', 'buse': 'XXBUSE'}) }}'.replace('XXDIAMETER', $(this).val().split('-')[0]).replace('XXBUSE', $(this).val().split('-')[1]);
        if ($(this).parent('label').hasClass('negative-square-result')) {
            getCanBeImproved(getCanBeImprovedURI).then(function (result) {
                canImproveDiameter = result.canImprove;
                let improveResults = $('#improveResults');
                let sentence = $('#improveResults span');
                if (canImproveDiameter) {
                    sentence.text('Changer les paramètres choisis dans le service');
                    improveResults.removeClass('button-results-forbidden');
                } else {
                    improveResults.addClass('button-results-forbidden');
                    sentence.text("Pas de solution proposable, nous vous invitons à créer une nouvelle étude avec un autre type d'installation");
                }
                improveResults.show();
            });
        } else {
            $('#improveResults').hide();
        }
    });

    if ('{{ noDiameter|raw }}') {
        $('#btn-call-me').on('click', () => {
            let contactURI = '{{ path('service_created_on_project_no_diameter') }}';
            let serviceId = '{{ serviceCreatedOnProjectCurrent.id }}';
            postContactNoDiameter(contactURI, serviceId).then(result => {
                if (result.status === "SUCCESS") {
                    $('#no-diameter-title').text('Merci pour votre prise de contact.');
                    $('#no-diameter-message1').text('Nous allons vous rappeler au plus vite, dans nos horaires d\'ouverture*.');
                    $('#no-diameter-message2').text('À très vite !');
                    $('#btn-call-me').hide();
                } else {
                    createToast('danger', 'Une erreur s\'est produite lors de votre demande, veuillez réessayer plus tard.');
                }
            });
        });
    }

    const postContactNoDiameter = async (uri, serviceId) => {
        let data = new FormData();
        data.append('serviceId', serviceId);
        return $.ajax({
            url: uri,
            type: "POST",
            data: data,
            dataType: "JSON",
            processData: false,
            contentType: false,
            async: true,
        });
    }

    let uriLoadingXml = '{{ path('service_created_on_project_loading_diameters', {'id': serviceCreatedOnProjectCurrent.id, 'generateWet': true, 'displayWet': true}) | raw }}';
    let uriAdr = '{{ path('service_created_on_project_show_result_diameter', {'id': serviceCreatedOnProjectCurrent.id, 'displayWet': app.request.get('displayWet') == 1 ?'0':'1'}) }}';
    let isAlreadyGenerated = {{ (project.techDataValueForService('displayWet') == 1)|json_encode|raw }};
    $('#generateWet').on('click', () => {
        $('#popup-generate-wet').modal('show');
    });

    $('#boutonGenerateWet').on('click', () => {
        if (isAlreadyGenerated) {
            $('#generateWetForm').prop('action', uriAdr);
        } else {
            $('#generateWetForm').prop('action', uriLoadingXml);
        }
        $('#generateWetForm').submit();
    });

    if (isDemo) {
        applyTooltipToDisabledElements('#newProject, #improveResults, .buttonZcal a, a.faqBtn, #btnOtherDiameter');
    }
</script>