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

{% block body %}
    <div>
        <center>
            <div id="genetableau">
                {% set formName = "formChoixSites" %}
                <form method="POST" id="{{ formName }}">
                    <input type="hidden" name="inputName" value="{{ post.inputName }}">
                    <input type="hidden" name="divInputs" value="{{ post.divInputs }}" id="divInputs">
                    <input type="hidden" name="opened_only" value="{{ post.opened_only }}">
                    <input type="hidden" name="editable" value="{{ post.editable }}">
                    {{ inputAdvance('SWITCH', {
                        'titre' : 'Sélectionner tous les sites ?' | trad,
                        'name' : 'TOUS',
                        'value' : post.TOUS,
                        'option': not post.editable ? 'disabled': ''
                    }) }}
                    <br>
                    <table class="table" id="tableau">
                        <thead class="thead-dark">
                        <tr>
                            <th>
                                {{ triTable('SITE',  infoPagination.filter.tri_SITE, 'Code' | trad, 'genetableau', path('Stock.Inventaire.popupChoixSites'), formName) }}
                            </th>
                            <th>
                                {{ triTable('DESIGN',  infoPagination.filter.tri_DESIGN, 'Libellé' | trad, 'genetableau', path('Stock.Inventaire.popupChoixSites'), formName) }}
                            </th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>
                                {{ filterTable('SITE', infoPagination.filter.filter_SITE, '', 'genetableau', path('Stock.Inventaire.popupChoixSites'), formName) }}
                            </th>
                            <th>{{ filterTable('DESIGN', infoPagination.filter.filter_DESIGN, '', 'genetableau', path('Stock.Inventaire.popupChoixSites'), formName) }}</th>
                            <th></th>
                        </tr>
                        {% for key, siteStock in sitesStock %}
                            <tr id="{{ key }}">
                                <td>{{ siteStock.SITE   | convert_encoding('UTF-8', 'ISO-8859-1') }}</td>
                                <td>{{ siteStock.DESIGN  | convert_encoding('UTF-8', 'ISO-8859-1') }}
                                <th>
                                    <input
                                            type="checkbox"
                                            data-site="{{ siteStock.SITE }}"
                                            data-type="ssitesto"
                                            data-devise="{{ siteStock.DEVISE }}"
                                            data-valDevise="{{ siteStock.VAL_DEVISE }}"
                                            class="form-control checkbox"
                                            id="checkbox_{{ siteStock.SITE }}"
                                            name="SCINVENT[{{ key }}]"
                                            onClick="toggleCheckbox(event, 'checkbox_{{ siteStock.SITE }}');"
                                            {% if not post.editable %}disabled="disabled"{% endif %}
                                    />
                                </th>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </form>
                {{ paginations(
                    path('Stock.Inventaire.popupChoixSites'),
                    infoPagination.nombreDePage,
                    infoPagination.page,
                    infoPagination.post,
                    'modal-body'
                ) }}
            </div>
            <div class="validation_modal modal-footer">
                {% if post.editable %}
                    <button type="button" class="button principal button_right last mr-0" onClick="updateCahiersInventaireInputs(getState('{{ post.divInputs }}')); desactivePopup();">
                        {{ 'Valider' | trad }}
                    </button>
                {% endif %}
                <button type="button" class="button secondaire button_right" onClick='desactivePopup();'>{{'Fermer' | trad }}</button>
            </div>
        </center>
    </div>
    <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">
        refreshDomOnComplete('{{ post.divInputs }}');

        function handleSelectAllSwitchChange (event) {
            event.stopPropagation();
            event.stopImmediatePropagation();

            activeLoader();

            const selectAll = $(event.target).is(':checked');

            $.ajax({
                type: 'POST',
                url: '{{ path('Stock.Inventaire.getCahierInventaireState') }}',
                data: {
                    SELECT_ALL: selectAll,
                },
                success: (sitesStock) => {
                    let state = [];
                    for (let key in sitesStock) {
                        state.push({
                            SITE: sitesStock[key].SITE,
                            MAG: $('#' + CSS.escape('input_SINVENTA[MAG]')).val(),
                            DEVISE: sitesStock[key].DEVISE,
                            VAL_DEVIS: sitesStock[key].VAL_DEVISE,
                        });
                    }

                    setState('{{ post.divInputs }}', state);
                    updateCahiersInventaireInputs(state);
                    updateDom(state);
                    $(event.target).prop('checked', selectAll);
                    setSelectAllState('{{ post.divInputs }}', selectAll);
                    desactiveLoader();
                }
            });
        }

        function mutateState (checkbox, state) {
            if (checkbox.is(':checked')) {
                state.push({
                    SITE: checkbox.attr('data-site'),
                    MAG: $('#' + CSS.escape('input_SINVENTA[MAG]')).val(),
                    DEVISE: checkbox.attr('data-devise'),
                    VAL_DEVIS: checkbox.attr('data-valDevise'),
                });
            } else {
                state = state.filter((siteStock) => siteStock.SITE !== checkbox.attr('data-site'));
            }

            return state;
        }

        function updateDom (state) {
            $('input[data-type="ssitesto"]').prop('checked', false);

            for (let key in state) {
                $('input[data-site="'+state[key]['SITE']+'"]').prop('checked', true);
            }
        }
    </script>
{% endblock %}