{% extends '@InstallBois/index.html.twig' %}

{% block title %}
    INSTALL BOIS
{% endblock %}
{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Paramètres | Consulter un appareil
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Informations de l'appareil
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <table class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th scope="col">Nom de l'appareil</th>
                        <th scope="col">Finitions</th>
                        <th scope="col">Marque</th>
                        <th scope="col">Fabricant</th>
                        <th scope="col">Version</th>
                        <th scope="col">État</th>
                        {% if is_granted('ROLE_ADMIN') %}
                            <th scope="col">Fiche</th>
                        {% endif %}
                    </tr>
                    </thead>
                    <tbody>
                    <tr style="font-weight: bold;">
                        <td style="font-size: 15px">{{ product.modele is not null ? product.modele  : "N/A" }}</td>
                        <td style="font-size: 15px">{{ infos["finitions"] is not null ?infos["finitions"]  : "N/A" }}</td>
                        <td style="font-size: 15px">{{ infos["brand"] is not null ?infos["brand"]  : "N/A" }}</td>
                        <td style="font-size: 15px">{{ infos["manufacturer"] is not null ?infos["manufacturer"]  : "N/A" }}</td>
                        <td style="font-size: 15px"><b>{{ product.version is not null ? product.version  : "N/A" }}</b>
                        </td>
                        <td style="font-size: 15px">{{ infos["state"] is not null ?infos["state"]  : "N/A" }}</td>
                        {% if is_granted('ROLE_ADMIN') %}
                            <td style="font-size: 15px">{{ product.isLight == true ?'Light'  : 'Full' }}</td>
                        {% endif %}
                    </tr>
                    </tbody>
                </table>
            </div>
            {{ include('products/_block/product_comment_table.html.twig') }}
            <br>
            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top:2%">
                <div class="rubrique_titre">
                    <span>Informations détaillées de l'appareil
                    </span>
                </div>
                <table class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th scope="col">Libelle</th>
                        <th scope="col">Information</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for attrProduct in productInfos["device"] %}
                        <tr>
                            <td>{{ attrProduct["label"] }}</td>
                            <td>{{ attrProduct["value"] is not null ? attrProduct["value"]|nl2br  : "N/A" }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% for attrProduct in productInfos["device_details"] %}
                {% set baseLoop = loop.index0 %}
                <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top:2%">
                    <div class="rubrique_titre">
                    <span>
                        Données de fonctionnement de l’appareil pour le combustible :
                    </span>
                        <span class="combusTitle">{{ productInfos["device_details"][baseLoop][0]["value"] }}</span>
                    </div>
                    <table class="hover row-border" style="padding:1%;width:100%">
                        <thead>
                        <tr>
                            <th scope="col">Libelle</th>
                            <th scope="col">Information</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% if productInfos["device_details"] is not empty %}
                            {% for attrProduct in productInfos["device_details"][baseLoop] %}
                                <tr>
                                    <td>{{ attrProduct["label"] }}</td>
                                    <td>{{ attrProduct["value"] is not null ? attrProduct["value"]|nl2br  : "N/A" }}</td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    </div>
    {#    {{ dump(productInfos) }} #}
    <div id="productParametersArray" style="display: none"
         data-productParameters="{{ productParametersProvider|json_encode()|convert_encoding('UTF-8', 'UTF-8') }}"></div>
    {{ include('products/_block/_form_add_or_update_product_comment.html.twig') }}
    <script type="application/javascript">
        $(document).ready(function () {
            let productParameters = JSON.parse(document.querySelector('#productParametersArray').dataset.productparameters);
            let varProduct = "{{ product.variante }}";
            if (varProduct !== "") {
                if (varProduct.search(";") !== -1) {
                    varProduct = varProduct.split(";");
                }
            } else {
                varProduct = null;
            }
            let textVar;
            if (varProduct !== null) {
                if (typeof (varProduct) !== "string") {
                    textVar = "N/A";
                    varProduct.map((v, index) => {
                        if (index !== 0) {
                            textVar += " - "
                        } else {
                            textVar = "";
                        }
                        textVar += productParameters.departFumee.find(x => x.id === v).label;
                    })
                } else {
                    textVar = productParameters.departFumee.find(x => x.id === varProduct).label;
                }

            } else {
                textVar = "Aucun départ fumées";
            }
            $('#variantes').text(textVar)

            let typeProduct = '{{ product.productsDevices.type }}';
            let textType = productParameters.TypeAppareil.find(x => x.id === typeProduct).label;
            $('#type').text(textType)

            let comb1 = '{{ product.productsDevices.combustible1 }}';
            let comb2 = '{{ product.productsDevices.combustible2 }}';

            $('#comb1').text(comb1 !== "" ? productParameters.Combustible.find(x => x.id === comb1).label : "N/A");
            $('#comb2').text(comb2 !== "" ? productParameters.Combustible.find(x => x.id === comb2).label : "Pas de second combustible");

            let departFumee = '{{ product.productsDevices.departFumeeType }}'.split(';');
            let text = '';
            for (let i = 0; i < departFumee.length; i++) {
                text += departFumee[i] !== "" ? productParameters.departFumee.find(x => x.id === departFumee[i]).label : "N/A";
                text += i === departFumee.length - 1 ? '' : ', ';
            }
            $('#departFumee').text(text);

            let buse1Type = '{{ product.productsDevices.buse1Type }}';
            $('#buse1Type').text(buse1Type !== "" ? productParameters.typeBuse.find(x => x.id === buse1Type).label : "N/A");

        })
    </script>
{% endblock %}