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

{% block body %}
    <div>
        <div id="genetableau" class="clearfix">
            {% set formName = "formulaireListeFamillesousFamille" %}
            <form method="post" name="{{ formName }}" id="{{ formName }}">
                <input type="hidden" name="inputName" value="{{ post.inputName }}">
                <input type="hidden" name="divInputs" value="{{ post.divInputs }}">
                <input type="hidden" name="editable" value="{{ post.editable }}">
                {{ inputAdvance('SWITCH', {
                    'titre' : 'Sélectionner toutes les familles ?' | trad,
                    'name' : 'TOUS',
                    'value' : post.TOUS,
                    'option': not post.editable ? 'disabled': ''
                }) }}
                <br>
                <div class="row">
                    {{ filterTable('F#point#DESIGNAT', post['filter_F#point#DESIGNAT'], 'Famille' | trad, 'genetableau', path('Stock.Inventaire.popupChoixFamilles'), formName) }}
                </div>
                <div class="row" style="height:500px;overflow-y: auto;">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="slide-container">
                                <div class="list-group" id="mg-multisidetabs">
                                    {% for codeFam, choixFamille in choixFamilles %}
                                        {% if choixFamille.SOUS_FAMILLES | length > 0 %}
                                            <a class="list-group-item clearfix">
                                                <span>{{ choixFamille.LABEL }} <span class="label-selected" data-type="famille" data-codeFam="{{ codeFam }}"></span></span>
                                                <span class="glyphicon glyphicon-chevron-down mg-icon pull-right"></span>

                                                <input
                                                    type="checkbox"
                                                    class="form-control checkbox mr-small"
                                                    style="float:right;"
                                                    data-ssfam=""
                                                    data-type="famille"
                                                    data-codeFam="{{ codeFam }}"
                                                    data-nbSsfam="{{ choixFamille.SOUS_FAMILLES | length }}"
                                                    data-ssfamClass="checkbox_{{ codeFam }}"
                                                    id="checkbox_ALL_{{ codeFam }}"
                                                    name="{{ post.inputName }}[{{ codeFam }}]"
                                                    onclick="toggleFamille(event, 'checkbox_{{ codeFam }}', 'checkbox_ALL_{{ codeFam }}');"
                                                    {% if not post.editable %}disabled="disabled"{% endif %}
                                                />
                                                <span class="pull-right"></span>
                                            </a>
                                            <div class="panel list-sub">
                                                <div class="panel-body">
                                                    <div class="list-group" id="popup_id_{{ codeFam }}">
                                                        <span class="list-group-item">
                                                            <table class="table table-hover">
                                                                <thead class="thead-dark">
                                                                    <tr>
                                                                        <th scope="col" width="130px">{{ 'Code' | trad }}</th>
                                                                        <th scope="col" >{{ 'Libellé' | trad }}</th>
                                                                        <th scope="col"></th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                     {% for sousFamille in choixFamille.SOUS_FAMILLES %}
                                                                         <tr>
                                                                            <td>{{ sousFamille.CODE_SFA }}</td>
                                                                            <td>{{ sousFamille.DESIGNAT  }} <span class="label-selected" data-type="sousFamille" data-codeFam="{{ codeFam }}" data-codeSfa="{{ sousFamille.CODE_SFA }}"></span></td>
                                                                            <td>
                                                                                <input
                                                                                    type="checkbox"
                                                                                    data-selArt=""
                                                                                    data-type="sousFamille"
                                                                                    data-codeFam="{{ codeFam }}"
                                                                                    data-codeSfa="{{ sousFamille.CODE_SFA }}"
                                                                                    class="form-control checkbox checkbox_{{ codeFam }}"
                                                                                    id="checkbox_{{ loop.index }}"
                                                                                    name="{{ post.inputName }}[{{ codeFam }}][{{ sousFamille.CODE_SFA }}]"
                                                                                    onClick="toggleSousFamille(event, 'checkbox_{{ codeFam }}')"
                                                                                    {% if not post.editable %}disabled="disabled"{% endif %}
                                                                                />
                                                                            </td>
                                                                        </tr>
                                                                     {% endfor %}
                                                                </tbody>
                                                            </table>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="validation_modal modal-footer">
                    {% if post.editable %}
                        <button type="button" class="button principal button_right last mr-0" onClick="validate()">
                            {{ 'Valider' | trad }}
                        </button>
                    {% endif %}
                    <button type="button" class="button secondaire button_right" onClick='desactivePopup();'>
                        {{'Fermer' | trad }}
                    </button>
                </div>
            </form>
        </div>
    </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>
        refreshDomOnComplete('{{ post.divInputs }}');

        function validate () {
            const siteParameters = getSiteParameters();
            const sousFamillesInventorieesState = getState('{{ post.divInputs }}');
            const data = { FAMILLE: sousFamillesInventorieesState, SITE: siteParameters, DATEFERM: $('#input_' + CSS.escape('SINVENTA[DATEFERM]')).val() };

            if (sousFamillesInventorieesState.length === 0 && siteParameters.length === 0) {
                data.SELECT_ALL = 'false';
            }

            updateSousFamillesInventorieesInputs(sousFamillesInventorieesState);
            updateArticlesInventories('{{ path('Stock.Inventaire.getArticlesInventoriesState') }}', data);
            desactivePopup();
        }

        $('#input_TOUS').on('change', (event) => {
            event.stopPropagation();
            event.stopImmediatePropagation();

            activeLoader();
            setTimeout(() => {
                const selectAll = $(event.target).is(':checked');
                const famillesCheckboxes = $('input[data-type="famille"]');

                famillesCheckboxes.each((key, familleCheckbox) => {
                    $(familleCheckbox).prop('checked', selectAll);
                    toggleFamille(null, $(familleCheckbox).attr('data-ssfamClass'), $(familleCheckbox).attr('id'));
                });

                $(event.target).prop('checked', selectAll);
                setSelectAllState('{{ post.divInputs }}', selectAll);

                desactiveLoader();
            }, 25);
        });

        function toggleFamille (event, sousFamilleCheckboxClass, familleCheckboxId) {
            event?.stopImmediatePropagation();

            let state = getState('{{ post.divInputs }}');
            const familleCheckbox = $('#' + familleCheckboxId);
            const codeFam = familleCheckbox.attr('data-codeFam');

            if (familleCheckbox.is(':checked')) {
                const famille = { FAM: codeFam, SSFAM: 'T', SOUS_FAMILLES: [] };
                $('.' + sousFamilleCheckboxClass).each((index, checkbox) => {
                    famille.SOUS_FAMILLES.push({ SEL_ART: 'T', CODE_SFA: $(checkbox).attr('data-codeSfa') });
                });

                state.push(famille);
            } else {
                setSelectAllState('{{ post.divInputs }}', false);
                state = state.filter((famille) => famille.FAM !== codeFam);
            }

            setState('{{ post.divInputs }}', state);
            updateDom(state);
        }

        function toggleSousFamille (event, sousFamilleCheckboxClass) {
            event.stopImmediatePropagation();

            const sousFamilleeCheckbox = $(event.target);
            const state = getState('{{ post.divInputs }}');
            const codeFam = sousFamilleeCheckbox.attr('data-codeFam');
            const codeSfa = sousFamilleeCheckbox.attr('data-codeSfa');
            const nbSousFamilles = parseInt($('input[data-type="famille"][data-codeFam="'+codeFam+'"]').attr('data-nbSsfam'));

            let famille = state.find((famille) => famille.FAM === codeFam);
            if (!famille) {
                famille = { SSFAM: 'P', SOUS_FAMILLES: [], FAM: codeFam };
            }

            if (sousFamilleeCheckbox.is(':checked')) {
                famille.SOUS_FAMILLES.push({ SEL_ART: 'T', CODE_SFA: codeSfa });
                famille.SSFAM = nbSousFamilles === $('.' + sousFamilleCheckboxClass+ ':checked').length ? 'T': 'P';

                if (!state.find((famille) => famille.FAM === codeFam)) {
                    state.push(famille);
                } else {
                    state.map((fam) => {
                        if (fam.FAM === famille.FAM) {
                            return famille;
                        }

                        return fam;
                    })
                }

                setState('{{ post.divInputs }}', state);
            } else {
                famille.SSFAM = 'P';
                famille.SOUS_FAMILLES = famille.SOUS_FAMILLES.filter((sousFamille) => sousFamille.CODE_SFA !== codeSfa);
                state.map((fam) => {
                    if (fam.FAM === famille.FAM) {
                        return famille;
                    }

                    return fam;
                })

                setSelectAllState('{{ post.divInputs }}', false);
                setState('{{ post.divInputs }}', state.filter((famille) => famille.SOUS_FAMILLES.length > 0));
            }

            updateDom(getState('{{ post.divInputs }}'));
        }

        function updateDom (state) {
            $('.label-selected').text('');
            $('input[type="checkbox"]').prop('checked', false);

            for (let key in state) {
                const famille = state[key];
                const familleInput = $('input[data-type="famille"][data-codeFam="'+famille.FAM+'"]');
                const familleSpan = $('span[data-type="famille"][data-codeFam="'+famille.FAM+'"]');

                familleInput.prop('checked', true);
                familleSpan.text(' (' + famille.SSFAM + ')');
                familleInput.attr('data-ssfam', famille.SSFAM);

                for (let key in famille.SOUS_FAMILLES) {
                    const sousFamille = famille.SOUS_FAMILLES[key];
                    const sousFamilleInput = $('input[data-type="sousFamille"][data-codeFam="'+famille.FAM+'"][data-codeSfa="'+sousFamille.CODE_SFA+'"]');
                    const sousFamilleInputSpan = $('span[data-type="sousFamille"][data-codeFam="'+famille.FAM+'"][data-codeSfa="'+sousFamille.CODE_SFA+'"]');

                    sousFamilleInput.prop('checked', true);
                    sousFamilleInput.attr('data-selArt', sousFamille.SEL_ART);
                    sousFamilleInputSpan.text(' (' + sousFamille.SEL_ART + ')');
                }
            }
        }
    </script>
{% endblock %}