{% block body %}
<td colspan="10">
    <div>
        <h5>{{'Liste des lignes d\'articles du terme de paiement' | trad ~ colon()}}</h5>
        <table class="table table-hover" id="lineTable">
            <thead class="thead-dark">
                <tr>
                    <th>
                        {{ 'Numéro Ligne' | trad }}
                    </th>
                    <th>
                        {{ 'Code Article' | trad }}
                    </th>
                    <th>
                        {{ 'Désignation' | trad }}
                    </th>
                    <th>
                        {{ 'Prix Unitaire' | trad }}
                    </th>
                    <th>
                        {{ 'Quantité demandée' | trad }}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for ligne in allTpPos %}
                    <tr>
                        <td>
                            {{ ligne.NO_PO }}
                        </td>
                        <td>
                            {{ ligne.CODE_ART }}
                        </td>
                        <td>
                            {{ ligne.DES_SOMM }}
                        </td>
                        <td class="montant">
                            {{ ligne.PU | prixUnitaire ~ ' ' ~ devise }}
                        </td>
                        <td class="montant">
                            {{ MODULE == 'DA_ENTET' ? (ligne.QTE_DEM ~ ' ' ~ ligne.UNITE) : (qteByUnite(ligne.QTE_COMM, ligne.UNITE) ~ ' ' ~ ligne.UNITE)}}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>    
        <hr>
        <h5>
            {{'Liste des événements du terme de paiement' | trad ~ colon()}}
        </h5>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">{{ 'Code évènement' | trad }}</th>
                    <th scope="col">{{ 'Libellé' | trad }}</th>
                    <th scope="col">{{ 'Automatique' | trad }}</th>
                    <th scope="col">{{ 'Avec postes ?' | trad }}</th>
                    <th scope="col">{{ 'Responsable' | trad }}</th>
                </tr>
            </thead>
            <tbody>
            {% for tp in tps %}
                <tr {% if tp.lignes is defined and tp.lignes|length > 0 %} id="detailigne{{loop.index}}tp_{{numtp}}" {% endif %}>
                    <td {% if tp.lignes is defined and tp.lignes|length > 0 %} class="loupeCustom" {% endif %}>
                        {{tp.EVENEMENT | convert_encoding('UTF-8', 'ISO-8859-1')}}
                    </td>
                    <td>
                        {{tp.detailEvent.LIB_EVT | convert_encoding('UTF-8', 'ISO-8859-1') | trad}}
                    </td>
                    <td>
                        {{tp.detailEvent.HAPLUS | boolTrad}}
                    </td>
                    <td>
                        {{tp.detailEvent.PRO_POSTE | boolTrad}}
                    </td>
                    <td>
                        {{ tp.detailEvent.HAPLUS | boolSql ? '' : tp.RES_TP}}
                    </td>
                </tr>
                {% if tp.lignes is defined and tp.lignes|length > 0 %}
                <tr id="detailigne{{loop.index}}tp_{{numtp}}detail" class="detail_ligne hide_detail">
                    <td colspan="5">
                        
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">{{ 'Code Article' | trad }}</th>
                                    <th scope="col">{{ 'Numéro Ligne' | trad }}</th>
                                    <th scope="col">{{ 'Désignation' | trad }}</th>
                                    <th scope="col">{{ 'Prix Unitaire' | trad }}</th>
                                    <th scope="col">{{ 'Quantité demandée' | trad }}</th>
                                    <th scope="col">{{ 'Seuil' | trad }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for ligne in tp.lignes %}
                                    <tr>
                                        <td>{{ ligne.CODE_ART }}</td>
                                        <td>{{ ligne.NO_PO }}</td>
                                        <td>{{ ligne.DES_SOMM }}</td>
                                        <td class="montant">{{ ligne.PU | prix ~ ' ' ~ devise }}</td>
                                        <td>{{ ligne.QTE_DEM is defined ? qteByUnite(ligne.QTE_DEM, ligne.UNITE) ~ ' ' ~ ligne.UNITE : qteByUnite(ligne.QTE_COMM, ligne.UNITE) ~ ' ' ~ ligne.UNITE }}</td>
                                        <td class="{{ligne.POURCBUT != 0 ? 'montant'}}">{{ligne.POURCBUT == 0 ? 'Aucun' | trad : ligne.POURCBUT | prix ~ ' %' }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </td>
                </tr>
                {% endif %}
        {% endfor %}

            </tbody>
        </table>
    </div>
</td>

<style>

.loupeCustom {
  background-image: url('{{baseUrl()}}/IconeV2/Gestion/zoom.svg');
  background-position: right 8px center;
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: 14px;
}
</style>

<script>

    $('.loupeCustom').on('click', function() {
        const trParent = $(this).closest('tr').attr('id');
        $('#' + trParent + 'detail').toggleClass('hide_detail');
    });
</script>

{% endblock %}