{% block body %}
<td colspan="10">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col" width="15%">{{ 'Libellé TP' | trad }}</th>
                <th scope="col">{{ 'Descriptif' | trad }}</th>
                <th scope="col" width="10%">{{ 'Pourcentage' | trad }}</th>
                <th scope="col" width="10%">{{ 'Proportionnel livraisons' | trad }}</th>
                {# <th scope="col">{{ 'Terme de paiement facturable ?' | trad }}</th> #}
                <th scope="col" width="10%">{{ 'Fact. à terme' | trad }}</th>            
            </tr>
        </thead>
        <tbody>
        {% for tp in tps %}
            <tr {% if tp.events is defined and tp.events|length > 0 %} id="detailigne{{loop.index ~ '-' ~ id}}" {% endif %}>
                <td {% if tp.events is defined and tp.events|length > 0 %} class="loupeCustom" {% endif %}>{{ shortLibelle(tp.LIBELLE, ajaxPopup: false) }}</td>
                <td>{{ shortLibelle(tp.DESCRIPTIF, ajaxPopup: false) }}</td>
                <td class="montant">{{ tp.POURC_TP | prix  ~ ' %' }} </td>
                <td>{{ tp.BASE_LIVR | boolTrad }} </td>
                {# <td>{{ tp.TP_FACTURABLE | boolTrad }} </td> #}
                {% set listeUnitesDelaiFromDB = {
                    '1': 'Jour(s)' | trad,
                    '2': 'Mois' | trad,
                    '3': 'Année(s)' | trad,
                    '': ''
                } %}
                <td>
                {% if tp.DATELIBFACT == '00000000' %}
                    {{ tp.DELAIFACT == 0 and tp.TYPEDELAIFACT == '' ? 'Non' | trad : (tp.DELAIFACT ~ " " ~ listeUnitesDelaiFromDB[tp.TYPEDELAIFACT]) }}
                {% elseif tp.DATELIBFACT <= "now"|date("Ymd") %}
                    {{tp.DATELIBFACT}}
                {% endif %}
                </td>
            </tr>
            {% if tp.events is defined and tp.events|length > 0 %}
            <tr id="detailigne{{loop.index ~ '-' ~ id}}detail" class="detail_ligne hide_detail">
                <td colspan="6">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col" width="10%">{{ 'Code évènement' | trad }}</th>
                                <th scope="col">{{ 'Libellé' | trad }}</th>
                                <th scope="col" width="10%">{{ 'Automatique' | trad }}</th>
                                <th scope="col" width="10%">{{ 'Avec postes ?' | trad }}</th>
                                <th scope="col" width="10%">{{ 'Seuil' | trad }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for event in tp.events %}
                                <tr>
                                    <td>{{ event.detailEvent.CODE_EVT | convert_encoding('UTF-8', 'ISO-8859-1') }}</td>
                                    <td>{{ event.detailEvent.LIB_EVT | convert_encoding('UTF-8', 'ISO-8859-1') | trad }}</td>
                                    <td>{{ event.detailEvent.HAPLUS | boolTrad }}</td>
                                    <td>{{ event.detailEvent.PRO_POSTE | boolTrad }}</td>
                                    <td>{{ event.seuil ? event.seuil ~ ' %' : '' }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </td>
            </tr>
            {% endif %}
    {% endfor %}

        </tbody>
    </table>
</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 %}