{% 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 conduit
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                    <span style="font-size: 16px;">Informations conduit
                    </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" style="width: 8%">Nb diamètre</th>
                        <th scope="col" style="width: 8%">Nb Coude / Té</th>
                        <th scope="col">Nom du conduit</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.productsDucts.productsDuctsDetails|length }}</td>
                        <td style="font-size: 15px">{{ infos['nbrCoudes'] }} / {{ infos['nbrTes'] }}</td>
                        <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> {# Informations générals #}
            {{ include('products/_block/product_comment_table.html.twig') }}
            <br>
            <div class="col-sm-12 col-md-12 col-lg-12" style="display: flex;">
                <table id="detail_ducts_general" class="tableMediumTd hover row-border"
                       style="padding:1%;margin: 20px;width: 100%">
                    <thead>
                    <tr>
                        <th colspan="3">Informations de base sur les Diamètres</th>
                    </tr>
                    <tr>
                        <th scope="col">Diamètre int.</th>
                        <th scope="col">Diamètre ext.</th>
                        <th scope="col">Épaisseur isolant</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for details in product.productsDucts.productsDuctsDetails %}
                        <tr>
                            <td>{{ details.diamInt is not null ? details.diamInt  : "N/A" }}</td>
                            <td>{{ details.diamExt is not null ? details.diamExt  : "N/A" }}</td>
                            <td>{{ details.isolantEpaisseur is not null ? details.isolantEpaisseur  : "N/A" }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4">Aucun Diamètre n'a été configuré</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <table class="tableMediumTd hover row-border" style="padding:1%;width:50%;margin: 20px;">
                    <thead>
                    <tr>
                        <th colspan="4">Accessoires (Coude et Té)</th>
                    </tr>
                    <tr>
                        <th scope="col">Type</th>
                        <th scope="col">Angle (°)</th>
                        <th scope="col">Forme</th>
                        <th scope="col">Dzeta</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for accessories in product.productsDucts.productsDuctsAccessories %}
                        <tr>
                            <td>{{ accessories.type is not null ? accessories.type|capitalize  : "N/A" }}</td>
                            <td>{{ accessories.angleDispo is not null ? accessories.angleDispo  : "N/A" }}</td>
                            <td style="width: 35%;">
                                {% for forme in formeCoude %}
                                    {% if forme.id == accessories.forme %}
                                        {{ forme.label }}
                                    {% endif %}
                                {% endfor %}
                            </td>
                            <td>{{ accessories.dzeta is not null ? accessories.dzeta  : "N/A" }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4">Aucun Coude ou Té n'a été configuré</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div> {# Informations sur les diamètres et les coudes / t #}
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="rubrique_titre">
                    <span style="font-size: 16px;">Informations détaillées du conduit
                    </span>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding: 0px;">
                <table id="ductDT" class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50%;">Libelle</th>
                        <th scope="col">Information</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for attrProduct in productInfos["duct"] %}
                        {% if loop.index < 6 %}
                            <tr>
                                <td>{{ attrProduct["label"] }}</td>
                                <td>{{ attrProduct["value"] is not null ? attrProduct["value"]|nl2br  : "N/A" }}</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6" style="padding: 0px;padding-left: 5px;">
                <table id="ductDT" class="hover row-border" style="padding:1%;width:100%">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 50%;">Libelle</th>
                        <th scope="col">Information</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for attrProduct in productInfos["duct"] %}
                        {% if loop.index >= 6 %}
                            <tr>
                                <td>{{ attrProduct["label"] }}</td>
                                <td>{{ attrProduct["value"] is not null ? attrProduct["value"]|nl2br  : "N/A" }}</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12" style="margin-top:2%;">
            <div class="rubrique_titre">
                    <span style="font-size: 16px;">
                        Informations détaillées des diamètres [ {{ productInfos["duct_details"]|length }} ]
                    </span>
            </div>
            <table id="detail_ducts_infos" class="hover row-border" style="width: 100%">
                <thead>
                <tr>
                    <th scope="col" style="width: 20%;">Libelle</th>
                    {% for details in product.productsDucts.productsDuctsDetails|sort((a, b) => a.diamInt <=> b.diamInt) %}
                        <th scope="col" style=""><span
                                    style="font-size: 20px">⌀</span> {{ details.diamInt is not null ? details.diamInt  : "N/A" }}
                        </th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% set productInfoItems = productInfos["duct_details_formatted"] %}
                {% for ductQuest in productInfoItems %}
                    <tr>
                        <td style="text-align: left;padding-left: 2%;">{{ ductQuest["label"] }}</td>
                        {% for respo in ductQuest["values"] %}
                            <td style="padding: 5px;">{{ respo is not null ? respo|nl2br  : "N/A" }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    </div>
    <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 typeProduct = '{{ product.productsDucts.typeConduit }}';
            $('#type').text(productParameters.Typeconduit[typeProduct])
        })
        let nbDiam = {{ productInfos["duct_details"]|length }};
        let excludeSort = [];
        for (let i = 1; i <= nbDiam; i++) {
            excludeSort.push(i);
        }
        let params = {
            searching: true,
            order: [[0, "asc"]],
        };
        initDatatable('#detail_ducts_infos', params, excludeSort, true, false);
        let paramsGeneral = {
            searching: false,
            order: [[0, "asc"]],
        };
        initDatatable('#detail_ducts_general', paramsGeneral, null, true, false);

        //For manage the order of elements starting by É
        setTimeout(() => {
            let tr = $('#detail_ducts_infos tr');
            startbyD = tr.filter(function () {
                return $(this).find('td:first-child').text().startsWith("D")
            })
            tr.filter(function () {
                return $(this).find('td:first-child').text().startsWith("É")
            }).each(function () {
                $(this).insertAfter(startbyD[startbyD.length - 1]);
            })
        }, 1000);
    </script>
{% endblock %}