{% set titre = 'Modification du modèle de terme de paiement' | trad %}
{% do setAriane(3, titre) %}
{% extends 'layout.twig' %}

{% block body %}

<div class="contenu clearfix">
    {% set formActionPath = path('TermeDePaiement.TermeDePaiement.modeleValidationUpdate', {'MODULE': MODULE, 'idModele': idModele}) %}
    {% set messageInfo = 'La modification du modèle de terme de paiement a été enregistrée avec succès' %}

    <script>
        window.action.updateTpSuccess = function (data) {
                window.location.href = "{{path('TermeDePaiement.TermeDePaiement.gestionModeleTp', {MODULE})}}";
        };
        
        function reindexTermes() {
            $('#zone-termes fieldset').each(function(i) {
                var newIndex = i + 1;
                $(this).find('[id^="libelleContact"]').each(function() {
                    this.textContent = 'Terme de paiement ' + newIndex;
                });
            });
        }
        
        window.supprimerTerme = function(el) {
            $(el).closest('fieldset').remove();
            reindexTermes();
        };
        window.ajouterTerme = function() {
            $('#btnAddTerm').trigger('addTerme');
            reindexTermes();
        };
    </script>

    <h1 class="header-actions">
        {{ 'Modification du modèle de terme de paiement' | trad }}
    </h1>

    {{ ariane() }}

<div>
    <div style="display: flex; justify-content: end; width: 100%; margin-bottom: 1em;">
        <a href="{{ path('TermeDePaiement.TermeDePaiement.gestionModeleTp', {MODULE: MODULE}) }}" class="button secondaire">
            {{ 'Annuler' | trad }}
        </a>

        <button type="submit" class="button principal" form="form_update_ModeleTp">
            {{ 'Enregistrer' | trad }}
        </button>
    </div>

    <form 
        method="post"
        id="form_update_ModeleTp"
        action="{{ formActionPath }}"
        onsubmit="return ajaxSubmit(event)"
        data-onsuccess="updateTpSuccess"
        class="box-form clearfix"
    >
        <div class="tab-content">


        <fieldset class="scheduler-border">
            <legend class="scheduler-border"><div  id='libelleContact'>{{ 'Modèle' | trad }}</div></legend>
                <div class="col">
                    <div class="row">
                        {{ inputAdvance('TEXT',{
                            'titre'              : 'Nom du modèle' | trad,
                            'name'               : 'MODELE_TP',
                            'value'              : modele.LIB_MODELE ?? '',
                            'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                            'paramsValidator'    : "{'sizeMin' : '0', 'sizeMax' : '3000'}",
                            'obligatoire'        : true
                        }) }}
                    </div>
                </div>

                <div class="clearfix">
                    <div class="row">
                        {{ inputAdvance('TEXTAREA',{
                            'titre'              : 'Descriptif du modèle' | trad,
                            'name'               : 'DESCRIPTIF_MODELE',
                            'value'              : modele.DESCRIPTIF ?? '',
                            'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                            'paramsValidator'    : "{'sizeMin' : '0', 'sizeMax' : '3000'}",
                        }) }}
                    </div>
                </div>
        </fieldset>
            <hr>
            <div id="zone-termes">
    {% if formData is defined and formData | length > 0 %}
        {% for i, terme in formData %}
            <fieldset class="scheduler-border">
                <legend class="scheduler-border">
                    <div id='libelleContact'>{{ 'Terme de paiement' | trad }}</div>
                    <div id='supprimer'>
                        <a onClick="supprimerTerme(this);" class="button secondaire closed">{{ 'Supprimer' | trad }}</a>
                    </div>
                </legend>
                <div class="terme-paiement">
                    <div class="row">
                        <div class="col">
                            {{ inputAdvance('TEXT',{
                                'titre': 'Libellé du terme de paiement' | trad,
                                'name': 'termeDePaiement['~i~'][LIBELLE_TP]',
                                'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                                'paramsValidator'    : "{'sizeMin' : '0', 'sizeMax' : '120'}",
                                'value': terme.LIBELLE_TP|default(''),
                                'obligatoire': true
                            }) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ inputAdvance('TEXTAREA',{
                                'titre': 'Descriptif du terme de paiement' | trad,
                                'name': 'termeDePaiement['~i~'][DESCRIPTIF_TP]',
                                'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                                'paramsValidator'    : "{'sizeMin' : '1', 'sizeMax' : '3000'}",
                                'value': terme.DESCRIPTIF_TP|default(''),
                            }) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ inputAdvance('DEVISE', {
                                'titre': 'Pourcentage à payer' | trad,
                                'devise' : '%',
                                'name': 'termeDePaiement['~i~'][POURC_TP]',
                                'value': terme.POURC_TP| default(0) | prix,
                                'pathValidator': path('Ajax.validator.float'),
                                'paramsValidator': {'min': 0, 'max': 100, 'nomChamp': 'Pourcentage à payer' | trad },
                                'obligatoire': true,
                            }) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ inputAdvance('SWITCH',{
                                'titre': 'Proportionnel livraisons' | trad,
                                'name': 'termeDePaiement['~i~'][BASE_LIVR]',
                                'value': terme.BASE_LIVR|default(false),
                                'infos': 'En cochant ce bouton, vous déterminez que le paiement du terme de paiement est calculé en fonction des livraisons que vous avez réellement reçues.' | trad
                            }) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ inputAdvance('SWITCH',{
                                'titre': 'Facturation à terme' | trad,
                                'name': 'termeDePaiement['~i~'][FACTATERME]',
                                'value': terme.FACTATERME|default(false),
                                'addClass' : 'factaterme',
                                'infos': 'En cochant ce bouton, vous choisissez à quel moment le terme de paiement est facturable.' | trad
                            }) }}
                        </div>
                    </div>
                    <div class="toHide">

                        <div class="row">
                            <div class="col">
                                {{ inputAdvance('TEXT',{
                                    'titre': 'Délai de facturation à terme',
                                    'name': 'termeDePaiement['~i~'][DELAIFACT_TP]',
                                    'pathValidator'      : path('Ajax.validator.integer'),
                                    'paramsValidator'    : {sizeMin : 1, controleByValue: true, nomChamp: 'Délai de facturation à terme' | trad },
                                    'value': terme.DELAIFACT_TP|default(''),
                                    'obligatoire': true,
                                    'addClass'           : 'delaifact'
                                }) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                {{ inputAdvance('SELECT',{
                                    'titre': 'Type de délai de facturation à terme',
                                    'name': 'termeDePaiement['~i~'][TYPEDELAIFACT_TP]',
                                    'listeValue': typeDeDelai,
                                    'value': terme.TYPEDELAIFACT_TP|default(''),
                                    'optionVide': true,
                                    'obligatoire': true,
                                    'addClass' : 'typedelaifact'
                                }) }}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div style="width: 100%">
                        <hr>
                        <div class="row">
                            <div class="input-wrapper input-switch">
                                <label style="width: 40%">{{ 'Déclenchement(s)' | trad }}
                                    <span class="white-tooltip icone_input">
                                        <span class="infos_tooltip top-left">
                                            <span class="tooltip-arrow"></span>{{"Les déclenchements indiquent l’action qui doit être réalisée pour que le paiement puisse être facturé." | trad}}</span>
                                        <img src="{{ baseUrl('IconeV2/Gestion/question.svg') }}">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div>
                            <table class="table" id="table-{{i}}">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col" width="10%">{{ triTable('CODE_EVT', infoPagination.filter.tri_CODE_EVT, 'Code' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="">{{ triTable('LIB_EVT', infoPagination.filter.tri_LIB_EVT, 'Libellé' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="10%">{{ triTable('HAPLUS', infoPagination.filter.tri_HAPLUS, 'Automatique' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="10%">{{ triTable('PRO_POSTE', infoPagination.filter.tri_PRO_POSTE, 'Avec postes ?' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="10%">{{ triTable('SEUIL', infoPagination.filter.tri_SEUIL, 'Seuil' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="1%">
                                            <div class="flex justify-end">
                                                <button 
                                                    class="ajouter_blanc_v2 white-tooltip" 
                                                    id="declenchements[{{i}}]" 
                                                    data-declenchements="{{i}}"
                                                    data-callback-uri="{{ path(
                                                            'TermeDePaiement.TermeDePaiement.ajoutDeclenchementsModele', 
                                                            {MODULE, id: idModele, numtp: i }) 
                                                                }}"
                                                    onClick="handleDeclenchement{{i}}();" 
                                                    type="button" 
                                                    style="background-color: transparent; border: none; margin-right: 0;">
                                                    <span class="infos_tooltip left">
                                                        {{ 'Ajouter / modifier des déclenchements' | trad }}
                                                    </span>
                                                </button>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% set loopIndex = loop.index0 %}
                                {% for evt in terme.selected_evt %}
                                    <tr id="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'table' ~ loopIndex ~ '-ligne-' ~ evt.CODE_EVT }}">
                                        <td class="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? ' loupeCustom' : ''}}">
                                            {% set evt_name = ( (evt.CODE_EVT ?? evt.detailEvent.CODE_EVT) ~ '@' ~ (evt.LIB_EVT ?? evt.detailEvent.LIB_EVT) ~ '@' ~ ((evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolTrad) ~ '@' ~ ((evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolTrad) ) %}
                                            {{ (evt.CODE_EVT ?? evt.detailEvent.CODE_EVT) | convert_encoding('UTF-8', 'ISO-8859-1') }}
                                            {# ! Il faut que cet input soit présent ici afin d'être supprimé par ajoutDeclenchementModele si modification #}
                                            <input type="hidden" name="termeDePaiement[{{ i }}][selected_evt][]" value="{{ evt_name | e('html_attr') }}">
                                        </td>
                                        <td>
                                            {{ (evt.LIB_EVT ?? evt.detailEvent.LIB_EVT) | convert_encoding('UTF-8', 'ISO-8859-1') | trad }}
                                        </td>
                                        <td>
                                            {{ (evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolTrad }}
                                        </td>
                                        <td>
                                            {{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolTrad }}
                                        </td>
                                        <td class="montant">
                                            {% if (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql %}
                                            {{ inputAdvance('DEVISE', {
                                                'name': 'termeDePaiement['~ i ~'][seuils_evt][' ~ evt_name ~']',
                                                'value': (evt.seuil ?? 100) | number_format(2),
                                                'devise': '%',
                                                'pathValidator': path('Ajax.validator.float'),
                                                'paramsValidator': {'min': 0, 'max': 100, 'nomChamp': 'Seuil' | trad},
                                                'addCss': 'min-width: 3em; text-align: right; padding-right: 50px',
                                                'addStyle': 'inputSeuil',
                                                'obligatoire': false,
                                            }) }}
                                            {% endif %}
                                        </td>
                                        <td style="text-align: right;">
                                            <span class="Supprimer_v2" 
                                                data-container-contextuel="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'table' ~ loopIndex ~ '-ligne-' ~ evt.CODE_EVT}}" 
                                                style="opacity: 0; " 
                                                onclick="deleteRow(this)" 
                                                title="{{'Supprimer la ligne' | trad}}"
                                            >
                                            </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <script>
                    function handleDeclenchement{{i}}() {
                        ajaxDynamiqueTab("{{ path('TermeDePaiement.TermeDePaiement.ajoutDeclenchementsModele', {MODULE, id: idModele, numtp: i }) }}", "{{ 'Ajout déclenchements pour terme de paiement' |trad ~ ' n°' ~ i}}");
                    };
                </script>
            </fieldset>
        {% endfor %}
    {% endif %}
</div>
            <a class="button principal" id='btnAddTerm' onClick="ajouterTerme();">{{ 'Ajouter un terme de paiement' | trad }}</a>
        </div>
    </form>
    <div style="display: flex; justify-content: end; width: 100%; margin-top: 1em;">
        <a href="{{ path('TermeDePaiement.TermeDePaiement.gestionModeleTp', {MODULE: MODULE}) }}" class="button secondaire">
            {{ 'Annuler' | trad }}
        </a>
        <button type="submit" class="button principal" form="form_update_ModeleTp">
            {{ 'Enregistrer' | trad }}
        </button>
    </div>

    </div>
</div>

    {% apply jsTemplate('tpl-terme-paiement') %}
    <fieldset class="scheduler-border">
        <legend class="scheduler-border"><div  id='libelleContact'>{{ 'Terme de paiement __INDEX__' | trad }}</div>
            <div id='supprimer'><a id="" onClick="supprimerTerme(this);" class="button secondaire closed">{{ 'Supprimer' | trad }}</a></div>
        </legend>
        <div class="terme-paiement">
        <div class="row">
            <div class="col">
                {{ inputAdvance('TEXT',{
                    'titre'              : 'Libellé du terme de paiement' | trad,
                    'name'               : 'termeDePaiement[__INDEX__][LIBELLE_TP]',
                    'value'              : '__LIBELLE__',
                    'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                    'paramsValidator'    : "{'sizeMin' : '0', 'sizeMax' : '120'}",
                    'obligatoire'        : true
                }) }}
            </div>
        </div>

        <div class="row">
            <div class="col">
                {{ inputAdvance('TEXTAREA',{
                    'titre'              : 'Descriptif du terme de paiement' | trad,
                    'name'               : 'termeDePaiement[__INDEX__][DESCRIPTIF_TP]',
                    'value'              : '__DESCRIPTIF__',
                    'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                    'paramsValidator'    : "{'sizeMin' : '1', 'sizeMax' : '3000'}",
                }) }}
            </div>
        </div>

        <div class="row">
            <div class="col">
                {{ inputAdvance('DEVISE', {
                    'titre': 'Pourcentage à payer' | trad,
                    'devise' : '%',
                    'name': 'termeDePaiement[__INDEX__][POURC_TP]',
                    'value': '__POURC_TP__',
                    'pathValidator': path('Ajax.validator.float'),
                    'paramsValidator': {'min': 0, 'max': 100},
                    'obligatoire': true,
                }) }}
            </div>
        </div>

        <div class="row">
            <div class="col">
                {{ inputAdvance('SWITCH',{
                    'titre' : 'Proportionnel livraisons' | trad,
                    'name'  : 'termeDePaiement[__INDEX__][BASE_LIVR]',
                    'value' : '__BASE_LIVR__'
                }) }}
            </div>
        </div>

        <div class="row">
            <div class="col">
                {{ inputAdvance('SWITCH',{
                    'titre' : 'Facturation à terme' | trad,
                    'name'  : 'termeDePaiement[__INDEX__][FACTATERME]',
                    'value' : '__FACTATERME__',
                    'addClass' : 'factaterme'
                }) }}
            </div>
        </div>

        <div class="toHide">
            <div class="row">
                <div class="col">
                    {{ inputAdvance('TEXT',{
                        'titre'              : 'Délai de facturation à terme',
                        'name'               : 'termeDePaiement[__INDEX__][DELAIFACT_TP]',
                        'value'              : '__DELAIFACT__',
                        'pathValidator'      : path('Ajax.validator.integer'),
                        'paramsValidator'    : {sizeMin : 1, controleByValue: true, nomChamp: 'Délai de facturation à terme' | trad },
                        'obligatoire'        : true,
                        'addClass'           : 'delaifact'
                    }) }}
                </div>
            </div>

            <div class="row">
                <div class="col">
                    {{ inputAdvance('SELECT',{
                        'titre'              : 'Type de délai de facturation à terme',
                        'name'               : 'termeDePaiement[__INDEX__][TYPEDELAIFACT_TP]',
                        'listeValue'         : typeDeDelai,
                        'value'              : '__TYPEDELAIFACT__',
                        'optionVide'         : true,
                        'obligatoire'        : true,
                        'addClass'           : 'typedelaifact'
                    }) }}
                </div>
            </div>
        </div>
        <div class="row">
            <div style="width: 100%">
            <hr>
            <div class="row">
                <div class="input-wrapper input-switch">
                    <label style="width: 40%">{{ 'Déclenchement(s)' | trad }}
                        <span class="white-tooltip icone_input">
                            <span class="infos_tooltip top-left">
                                <span class="tooltip-arrow"></span>{{"Les déclenchements indiquent l’action qui doit être réalisée pour que le paiement puisse être facturé." | trad}}</span>
                            <img src="{{ baseUrl('IconeV2/Gestion/question.svg') }}">
                        </span>
                    </label>
                </div>
            </div>
            <div>
                <table class="table" id="table-__INDEX__">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col" width="10%">{{ 'Code' | trad}}</th>
                            <th scope="col" width="">{{ '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>
                            <th scope="col" width="1%">
                                <div class="flex justify-end">
                                    <button 
                                    class="ajouter_blanc_v2 white-tooltip" 
                                    id="declenchements[__INDEX__]" 
                                    data-declenchements="__INDEX__"
                                    data-callback-uri="{{ path(
                                                            'TermeDePaiement.TermeDePaiement.ajoutDeclenchementsModele', 
                                                            {MODULE, id: idModele, numtp: '__INDEX__' }) 
                                                        }}"
                                    type="button" 
                                    style="background-color: transparent; border: none; margin-right: 0;">
                                        <span class="infos_tooltip left">
                                            {{ 'Ajouter / modifier des déclenchements' | trad }}
                                        </span>
                                    </button>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for evt in post.selected_evt %}²
                        <input type="hidden" name="termeDePaiement[__INDEX__][selected_evt][]" value="{{ ( (evt.CODE_EVT ?? evt.detailEvent.CODE_EVT) ~ '@' ~ (evt.LIB_EVT ?? evt.detailEvent.LIB_EVT) ~ '@' ~ ((evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolTrad) ~ '@' ~ ((evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolTrad) ) | e('html_attr') }}">
                        <tr id="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'table-__INDEX__-ligne-__CODE_EVT__'}}">
                            <td class="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? ' loupeCustom' : ''}}">
                                {{ (evt.CODE_EVT ?? evt.detailEvent.CODE_EVT) | convert_encoding('UTF-8', 'ISO-8859-1') }}
                            </td>
                            <td>
                                {{ (evt.LIB_EVT ?? evt.detailEvent.LIB_EVT) | convert_encoding('UTF-8', 'ISO-8859-1') | trad }}
                            </td>
                            <td>
                                {{ (evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolTrad }}
                            </td>
                            <td>
                                {{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolTrad }}
                            </td>
                            <td class="montant">
                                {{ inputAdvance('DEVISE', {
                                    'name': 'termeDePaiement[__INDEX__][seuils_evt][__EVT_NAME__]',
                                    'value': (evt.seuil ?? 100) | number_format(decimals),
                                    'devise': '%',
                                    'pathValidator': path('Ajax.validator.float'),
                                    'paramsValidator': {'min': 0, 'max': 100, 'nomChamp': 'Seuil' | trad},
                                    'addCss': 'min-width: 3em; text-align: right; padding-right: 50px',
                                    'addStyle': 'inputSeuil',
                                    'obligatoire': false,
                                }) }}
                            </td>
                            <td style="text-align: right;">
                                <span class="Supprimer_v2" 
                                    data-container-contextuel="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'table-__INDEX__-ligne-__CODE_EVT__'}}" 
                                    style="opacity: 0; " 
                                    onclick="deleteRow(this)" 
                                    title="{{'Supprimer la ligne' | trad}}"
                                >
                                </span>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </div>
    </fieldset>
{% endapply %}

<script>
    let index = {{ lastNumTp }} + 1

    $(function() {
        var tpl = getJsTemplate('tpl-terme-paiement');
        var $container = $('#zone-termes');

        $('#btnAddTerm').on('addTerme', function() {
            var html = renderJsTemplate2(tpl, {
                '__INDEX__'        : index,
                '__LIBELLE__'      : '',
                '__DESCRIPTIF__'   : '',
                '__POURC_TP__'     : (0).toFixed(2),
                '__BASE_LIVR__'    : '',
                '__FACTATERME__'   : '',
                '__DELAIFACT__'    : '',
                '__TYPEDELAIFACT__': '',
                '__CODE_EVT__'     : ''
            });
            $container.append(html);

            const $newFactatermeSwitch = $container.find(`input[name^="termeDePaiement"][name$="[FACTATERME]"]`).last();
            if ($newFactatermeSwitch.length) {
                const $toHide = $newFactatermeSwitch.closest('.row').next('.toHide');
                $toHide.addClass("hide");
                $toHide.find(".delaifact").prop("disabled", true);
                $toHide.find(".typedelaifact").prop("disabled", true);
            }

            index++;
        });

        addGlobalEventListener('click', `[data-declenchements]`, function(e) {
            const index = e.target.getAttribute('data-declenchements');
            const valueLibelle = document.getElementById('input_termeDePaiement\[' + index + '\]\[LIBELLE_TP\]').value;
            ajaxDynamiqueTab(
                e.target.getAttribute('data-callback-uri'), 
                "{{ 'Ajout déclenchements pour terme de paiement' | trad }}",
                (valueLibelle != '' ? {libelle: valueLibelle} : {})
            );
        } );
    });

    $(document).on('change', "[id$='[FACTATERME]']", function() {
        const $toHide = $(this).closest('.row').next('.toHide')       
        if ($(this).is(":checked")) {
            $toHide.removeClass("hide");
            $toHide.find(".delaifact").prop("disabled", false);
            $toHide.find(".typedelaifact").prop("disabled", false);
        } else {
            $toHide.addClass("hide");
            $toHide.find(".delaifact").prop("disabled", true);
            $toHide.find(".typedelaifact").prop("disabled", true);
        }
    });

    $( document ).ready(function() {
        $(".input_value_switch.factaterme").each(function() {
            if ($(this).is(":checked")) {
                const $toHide = $(this).closest('.row').next('.toHide');
                $toHide.removeClass("hide");
                $toHide.find(".delaifact").prop("disabled", false);
                $toHide.find(".typedelaifact").prop("disabled", false);
            }
            $(this).trigger('change');
        });
    });

    function deleteRow(element) {
        const row = element.closest('tr');
        const codeEvtCell = row.querySelector('td:first-child');
        const codeEvt = codeEvtCell ? codeEvtCell.textContent.trim() : null;
 
        if (codeEvt) {
            row.parentElement.removeChild(row);
        }
    }
</script>

</div>

{% endblock %}