{% import "forms-macro/inputs_form.html.twig" as forms %}
    {% if is_granted('ROLE_DEMO') %}
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Créer un appareil sur mesure pour mon espace démo</span>
            </div>
            <form id="choiceDeviceDemo" style="display: flex; flex-direction: column; gap: 1rem;">
                <div class="row" style="display: flex; gap: 2rem; padding: 0 1rem">
                    <div id="type-container" style="width: 50%;">
                        {{ forms.select(
                            'Type d\'appareil :',
                            'Type',
                            'Type',
                            null,
                            "-- Choisissez un type d'appareil --",
                            1,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                    <div id="combustible-container" style="width: 50%; display: none;">
                        {{ forms.select(
                            'Combustible :',
                            'Combustible',
                            'Combustible',
                            null,
                            "-- Choisissez un combustible --",
                            2,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                </div>
                <div class="row" style="display: flex; gap: 2rem; padding: 0 1rem">
                    <div id="buse-container" style="width: 50%; display: none;">
                        {{ forms.select(
                            'Type de buse :',
                            'TypeBuse',
                            'TypeBuse',
                            null,
                            "-- Choisissez un type de buse --",
                            3,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                    <div id="etancheite-container" style="width: 50%; display: none;">
                        {{ forms.select(
                            'Étanchéité (forte, ou relative pour RT2012) :',
                            'Etancheite',
                            'Etancheite',
                            null,
                            "-- Sélectionnez votre choix --",
                            4,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                </div>
                <div class="row" style="display: flex; gap: 2rem; padding: 0 1rem">
                    <div id="puissanceNominale-container" style="width: 50%; display: none;">
                        {{ forms.select(
                            'Puissance nominale :',
                            'puissanceNominale',
                            'puissanceNominale',
                            null,
                            "-- Sélectionnez la puissance nominale --",
                            3,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                    <div id="depart-fumees-container" style="width: 50%; display: none;">
                        {{ forms.select(
                            "Départ des fumées :",
                            'departFumees',
                            'departFumees',
                            null,
                            "-- Sélectionnez le départ des fumées --",
                            5,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled"
                        ) }}
                    </div>
                </div>
            </form>
            <div id="infosDevice" style="display:none;font-size: 14px;margin-left: 15px;margin-bottom: 10px;">
                <span id="bigPN">ATTENTION : puissance nominale > 70 kW, dans ce cas INSTALL BOIS réalise le calcul du conduit selon l’EN 13384-1, à l’exclusion de tout autre contrôle.</span>
                <h5 style="font-weight: bold;font-size: 16px;color: #FC971F;margin: 0;">
                    <span id="infoMarque"></span>
                    <span id="infoModele"></span> : les informations techniques
                </h5>
                <span id="infoTypeAppareil"></span>&nbsp;<span id="infoCombustible"></span><br/>
                <span style="font-weight: bold">Puissance nominale : </span>
                <span id="infoPn"></span><br/>
                <span style="font-weight: bold">Puissance réduite : </span>
                <span id="infoPr"></span><br/>
                <span style="font-weight: bold">Type d'étanchéité : </span>
                <span id="infoEtancheite"></span><br/>
                <span style="font-weight: bold">Buse : <span id="infoBuse1"></span></span>
                <span id="infoBuse2"></span><br/>
                <span style="font-weight: bold">Buselot : </span>
                <span id="infoBuselot"></span><br/>
                <span id="infoSectionMiniAACParent" style="font-weight: bold">
                    Section mini Amenée d’Air requise par la notice :
                </span>
                <span id="infoSectionMiniAAC"></span><br/>
                <span style="font-weight: bold">Fonctionnement : </span>
                <span id="infoPorteInsert"></span><br/>
            </div>
            <div id="loaderMarqueDemo"
                 style="display:none; text-align: center;width: 100%">
                <img src="{{ asset('images/loader-service.gif') }}" alt="Loader"
                     style="width: 126px;">
            </div>
            <div style="display: flex; justify-content: flex-end; margin-top: 1rem; gap: 1rem; align-items: center">
                <p id="errorMsgDemo" style="color: red; display: none; white-space: nowrap; margin: 0">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span style="margin: 0 .5rem; font-weight: bold"></span>
                    <i class="fas fa-exclamation-triangle"></i>
                </p>
                <button onclick="saveProcessChoiceDeviceDemo()" id="submitChoiceDeviceFormBtnDemo" class="boutonAction"
                        style="float: right; display: none">
                    Étape suivante
                </button>
                <button onclick="searchProductDemo()" id="searchChoiceDeviceFormBtnDemo" class="boutonAction"
                        style="float: right; display: none">
                    Chercher un appareil
                </button>
            </div>
        </div>
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Appareil de l'étude</span>
            </div>
            <form id="choiceDeviceFormFake">
                <div class="row" style="padding: 0 15px 0 30px;">
                    <div class="row" style="margin-left: 0">
                        <div id="idMarqueDivFake" class="parentDivProductForm col-sm-3 col-md-5 col-lg-3"
                             style="padding: 0 15px 0 0;">
                            {{ forms.select(
                                'Marque',
                                "idMarqueFake",
                                "idMarqueFake",
                                null,
                                "-- Choisissez une marque --",
                                1,
                                null,
                                true,
                                false,
                                false,
                                false,
                                "errorMessageDisabled") }}

                        </div>
                        <div id="idModeleDivFake" class="parentDivProductForm col-sm-3 col-md-5 col-lg-3"
                             style="padding: 0 15px 0 0;">
                            {{ forms.select(
                                'Modèle',
                                "idModeleFake",
                                "idModeleFake",
                                null,
                                "-- Choisissez un modèle --",
                                2,
                                null,
                                true,
                                false,
                                false,
                                false,
                                "errorMessageDisabled") }}
                        </div>
                    </div>
                </div>
            </form>

        </div>
    {% else %}
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Appareil de l'étude</span>
            </div>
            <form id="choiceDeviceForm">
                <div class="row" style="padding: 0 15px 0 30px;">
                    <div class="row" style="margin-left: 0">
                        <div id="idMarqueDiv" class="parentDivProductForm col-sm-3 col-md-5 col-lg-3"
                             style="display:none;padding: 0 15px 0 0;">
                            {{ forms.select(
                                'Marque',
                                "idMarque",
                                "idMarque",
                                null,
                                "-- Choisissez une marque --",
                                1,
                                null,
                                true,
                                false,
                                false,
                                false,
                                "errorMessageDisabled") }}
                        </div>
                        <div id="loaderMarque" class="parentDivProductForm col-sm-3 col-md-5 col-lg-3"
                             style="display:block;text-align: center;width: 100%">
                            <img src="{{ asset('images/loader-service.gif') }}" alt="Loader"
                                 style="width: 126px;margin-left: -10%;">
                        </div>
                        <div id="idModeleDiv" class="parentDivProductForm col-sm-3 col-md-5 col-lg-3"
                             style="display:none;padding: 0 15px 0 0;">
                            {{ forms.select(
                                'Modèle',
                                "idModele",
                                "idModele",
                                null,
                                "-- Choisissez un modèle --",
                                2,
                                null,
                                true,
                                false,
                                false,
                                false,
                                "errorMessageDisabled") }}
                        </div>
                    </div>
                    <div class="parentDivProductForm col-sm-3 col-md-3 col-lg-3" style="padding: 0 15px 0 0;">
                        {% set finitionSelectValues = [] %}
                        {% set finitionDBValues = product is defined ?  product.finition|split(",") : null %}
                        {% for finition in finitionDBValues %}
                            {% set finitionSelectValues = finitionSelectValues|merge([{ "id" : finition, "label" : finition}]) %}
                        {% endfor %}
                        {{ forms.select(
                            'Finition(s) :',
                            "finitionDevice",
                            "finitionDevice",
                            null,
                            "-- Choisissez une finition --",
                            3,
                            null,
                            false,
                            false,
                            false,
                            false,
                            "errorMessageDisabled") }}
                    </div>
                    <div class="parentDivProductForm col-sm-3 col-md-3 col-lg-3" style="padding: 0 15px 0 0;">
                        {% set varianteSelectValues = [] %}
                        {% set varianteDBValues = product is defined ?  product.variante|split(",") : null %}
                        {% for variante in varianteDBValues %}
                            {% set varianteSelectValues = varianteSelectValues|merge([{ "id" : variante, "label" : variante}]) %}
                        {% endfor %}
                        {{ forms.select(
                            'Départ fumées :',
                            "varianteDevice",
                            "varianteDevice",
                            null,
                            "-- Choisissez un départ fumées --",
                            4,
                            null,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageDisabled") }}
                    </div>
                </div>
                <div style="display: flex; justify-content: center">
                    <a class="newAppMobile boutonAction" href="{{ path('products_devices_create') }}" style="margin: 1.5rem auto; padding-top: .3rem; display: none; cursor: pointer">Créer un appareil</a>
                </div>
            </form>
            {% if infoAppRamon is defined and infoAppRamon is not null %}
                <h5 style="font-weight: bold;font-size: 16px;color: #FC971F;margin: 0 0 10px 15px;">
                    Pour rappel : vous avez renseigné précédemment l’appareil <span style="color: black">{{ infoAppRamon['brand'] }} - {{ infoAppRamon['model'] }}</span> dans un autre service.
                </h5>
            {% endif %}
            {% if not is_granted('ROLE_DEMO') %}
                <div id="infosDevice" style="display:none;font-size: 14px;margin-left: 15px;margin-bottom: 10px;">
                    <span id="bigPN">ATTENTION : puissance nominale > 70 kW, dans ce cas INSTALL BOIS réalise le calcul du conduit selon l’EN 13384-1, à l’exclusion de tout autre contrôle.</span>
                    <h5 style="font-weight: bold;font-size: 16px;color: #FC971F;margin: 0;">
                        <span id="infoMarque"></span>
                        <span id="infoModele"></span> : les informations techniques
                    </h5>
                    <span id="infoTypeAppareil"></span>&nbsp;<span id="infoCombustible"></span><br/>
                    <span style="font-weight: bold">Puissance nominale : </span>
                    <span id="infoPn"></span><br/>
                    <span style="font-weight: bold">Puissance réduite : </span>
                    <span id="infoPr"></span><br/>
                    <span style="font-weight: bold">Type d'étanchéité : </span>
                    <span id="infoEtancheite"></span><br/>
                    <span style="font-weight: bold">Buse : <span id="infoBuse1"></span></span>
                    <span id="infoBuse2"></span><br/>
                    <span style="font-weight: bold">Buselot : </span>
                    <span id="infoBuselot"></span><br/>
                    <span id="infoSectionMiniAACParent" style="font-weight: bold">
                        Section mini Amenée d’Air requise par la notice :
                    </span>
                    <span id="infoSectionMiniAAC"></span><br/>
                    <span style="font-weight: bold">Fonctionnement : </span>
                    <span id="infoPorteInsert"></span><br/>
                </div>
            {% endif %}
            <div class="box-footer">
                <div style="float: right">
                    {% if not is_granted('ROLE_DEMO') %}
                        <button onclick="saveProcessChoiceDevice()" id="submitChoiceDeviceFormBtn" class="boutonAction"
                                style="float: right">
                            Étape suivante
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}


<div id="containerModal">
    {% set typeOfProduct = "device" %}
    {#    {{ include('rule_engine/prerequisite/_block/_add_new_brand_modal.html.twig') }} #}
    {{ include('rule_engine/prerequisite/_block/_add_new_product_model_modal.html.twig') }}
    {{ include('rule_engine/prerequisite/_block/_create_new_product_model_modal.html.twig') }}
</div>
<script type="text/javascript"
        src="{{ asset('install-bois/prerequisite/_choice_device.js') ~ "?rnd=" ~ random() }}"></script>

{# SCRIPT DEMO #}
{% if is_granted('ROLE_DEMO') %}
    <script type="text/javascript" src="{{ asset('install-bois/prerequisite/_choice_device_demo.js') }}"></script>
    <script type="text/javascript">
        const searchProductDemoPath = '{{ path('rule_engine_prerequisite_device_demo') }}';
        const productParametersProvider = {{ productParametersProvider | json_encode | raw }};
        const getBrandByIdURI = '{{ path('brand_get', {"id": "00"}) }}';
        const getProductDeviceDetailsURI = '{{ path('products_devices_details_get_one', {'id': '00'}) }}'
        let dataToSave;

        $(document).ready(function () {
            $('#showImage').on('click', function(e) {
                e.preventDefault();
                $('#imageModal').fadeIn(300);
            });

            $('.close-modal').on('click', function() {
                $('#imageModal').fadeOut(300);
            });

            $(window).on('click', function(e) {
                if ($(e.target).is('#imageModal')) {
                    $('#imageModal').fadeOut(300);
                }
            });

            const checkVisibility = setInterval(() => {
                if ($('#idMarqueDivFake').is(':visible')) {
                    applyTooltipToDisabledElements('#idMarqueFake + .select2-container .select2-selection, #idModeleFake + .select2-container .select2-selection, #addMarqueBtn, #addModeleBtn, #idMarqueFake, #idModeleFake');
                    clearInterval(checkVisibility);
                }
            }, 100);
        })
    </script>
{% endif %}