<td colspan="100" style="background-color: white !important;">
    <div class="clearfix">
        <form name="slotinvr_{{ codeArt }}" id="lot_form_{{ codeArt }}" method="POST" action="{{ path('Stock.LigneCahierInventaire.saisirResultatLotsInventaire', { noInv: noInv, site: site, codeArt: codeArt}) }}">
            <fieldset class="scheduler-border" id="lots">
                <legend class="scheduler-border">{{ 'Lots' | trad }}</legend>
                <table class="table table-hover">
                    <thead class="thead-dark" >
                    <tr>
                        <th scope="col" width="200px">
                            {{ 'N° Lot' | trad }}
                        </th>
                        <th scope="col" width="200px">
                            {{ 'Quantité théorique' | trad }}
                        </th>
                        <th scope="col" width="200px">
                            {{ 'Quantité' | trad }}
                        </th>
                        <th scope="col" width="200px">
                            {{ 'Date de péremption' | trad }}
                        </th>
                        {% if editable %}
                            <th scope="col" width="20px">
                            </th>
                        {% endif %}
                    </tr>
                    </thead>
                    {% set lotContainerId = 'collection' ~ codeArt %}
                    <tbody id="{{ lotContainerId }}">
                        {% for key, lotInventaire in lotsInventaire %}
                            {{ include('@Stock/LigneCahierInventaire/Composant/_lot.twig', { key: key, lotInventaire: lotInventaire, dateInputType: 'DATE', old: true, editable: editable }) }}
                        {% endfor %}
                    </tbody>
                </table>
                {% if editable %}
                    <div class="filtreBtn">
                        <button type="button" class="principal addItem button_left" onclick="addItem('{{ lotContainerId }}');">
                            + Ajouter
                        </button>
                        <button type="button" id="lot_form_submit_{{ codeArt }}" class="principal button button_right last">
                            Valider
                        </button>
                    </div>
                {% endif %}
            </fieldset>
        </form>
        <div class="d-none">
            <table class="table table-hover">
            {{ include('@Stock/LigneCahierInventaire/Composant/_lot.twig', { key: '%i%', model: true, dateInputType: 'TEXT' }) }}
            </table>
        </div>
    </div>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/postAjaxForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/collectionForm.js') }}"></script>
    <script type="application/javascript">
        function emptyOtherDetailsDiv () {
            const target = document.getElementById('lot_form_{{ codeArt }}');

            const observer = new MutationObserver(() => {
                $('.hide_detail').empty();
            });

            observer.observe(target, {
                childList: true,
                subtree: true
            });
        }

        emptyOtherDetailsDiv();

        $('.removeItem').on('click', (event) => {
            removeItem(event, '{{ lotContainerId }}');
        });

        $("#lot_form_submit_{{ codeArt }}").on('click', () => {
            const form = $('#lot_form_{{ codeArt }}');

            activeLoader();

            submitForm(form, form.serializeArray(), (data) => {
                const qteReelInput = $('input[codeart="{{ codeArt }}"]');

                $("#ligneCahierInventaire{{ codeArt }}detail").addClass('hide_detail');
                qteReelInput.val(data.sumQteReel);
                qteReelInput.trigger('change');

                desactiveLoader();
            });
        });

        function changeNoLotValue (name) {
            $('#input_' + CSS.escape(name)).val($('#text_' + CSS.escape(name)).val());
        }
    </script>
</td>