{% extends '@ajax-layout/layout.twig' %}

{% block body %}
    <div>
        <div id="emplacementInventaireForm">
            <div id="emplacements">
                <i>{{ 'Chaque emplacement ajouté filtrera les produits dont l\'emplacement commence par la valeur saisie' | trad }}</i>
                <div id="collection" class="p-base">
                    {% for key, emplacementInventorie in emplacementsInventories %}
                        {{ include('@Stock/Inventaire/Composant/_emplacements_inventories.twig', { key: key, emplacementInventorie: emplacementInventorie }) }}
                    {% endfor %}
                </div>
                <div class="bs-col-1">
                    <button type="button" class="principal addItem" onclick="addItem();">
                        + Ajouter
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="validation_modal modal-footer">
        {% if post.editable %}
            <button type="button" class="button principal button_right last" onClick="updateEmplacementsInventoriesInputs(); desactivePopup();">
                {{ 'Valider' | trad }}
            </button>
        {% endif %}
        <button type="button" class="button secondaire button_right" onClick='desactivePopup();'>{{'Fermer' | trad }}</button>
    </div>
    <div class="d-none">
        {{ include('@Stock/Inventaire/Composant/_emplacements_inventories.twig', { key: '%i%', model: true }) }}
    </div>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/collectionForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/selectMultiple.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/inventaireForm.js') }}"></script>
    <script type="application/javascript">
        $('.removeItem').on('click', (event) => {
            removeItem(event);
        });

        function updateEmplacementsInventoriesInputs() {
            const divInputs = $('#input_SEMP_INV');
            const inputs = $('#emplacementInventaireForm').find('input');

            divInputs.empty();
            $(inputs).each((key, input) => {
                divInputs.append('<input type="hidden" name="'+$(input).attr('name')+'" value="'+$(input).val()+'"/>')
            })
        }
    </script>
{% endblock %}