{% block body %}
    <form method="post" name="filtre_raters" id="filtre_raters">
        <div id="countButton" style="display: none;">
            <div style="margin-bottom: 0; margin-top: 13px; font-weight: bold; position:absolute;">
                <span style="font-weight: bold; position:relative;">
                    {{ 'Nombre de contributeur(s) sélectionné(s)' | trad }}
                    :
                </span>
                <span id="selectedCount">{{ post.selectedCount ?? 0 }}</span>
            </div>
            <a type="button" class="button principal" style="float:right; margin-bottom: 15px;"     
                onclick="addRater('{{chosenGroup}}');">
                {{ 'Ajouter le(s) contributeur(s)' | trad }}
            </a>
            <input type="hidden" id="input_selectedCount" name="selectedCount" value="{{ post.selectedCount ?? 0 }}"/>
            <input type="hidden" id="input_selectedCount" name="chosenGroup" value="{{ chosenGroup }}"/>
            <div id='listInputSelected'>
                {% for key, val in listeSelectInput %}
                    <input type='hidden' name='{{ key }}' id='{{ key }}' value='{{ val }}'/>
                {% endfor %}
            </div>
        </div>
        <a class="button secondaire button_right" onclick="displayGroups();">{{ 'Annuler' | trad }}</a>
        <div id="refresh_raters" class="clearfix" style="margin-top: 20px;">
            <table class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th width="5%"></th>
                        <th scope="col" width="">{{ 'NOM' }}</th>
                        <th scope="col" width="">{{ 'EMAIL' }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contributor in contributors %}
                        <tr id="rater_{{ loop.index }}">
                            <td>
                                <input type="checkbox" 
                                data-checkall = "allRaters" 
                                class="form-control checkbox selected_rater" 
                                data-id="{{ contributor.CODE }}" 
                                id="input_selected_rater_{{ contributor.CODE }}" 
                                name="selected_rater_{{ contributor.CODE }}"/>
                            </td>
                            <td>{{ contributor.NOM }}</td>
                            <td>{{ contributor.EMAIL }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <script>
                function addRater(group) {
                    activeLoader();
                    $.ajax({
                        url: {{ path(
                            'Consultation.GroupOfContributors.addContributorToGroup',
                            {idAO: idAO}
                        ) | json }},
                        type: 'POST',
                        data: $('#filtre_raters').serializeArray(),
                        success: function (data) {
                            desactiveLoader();
                            $("#divParam").html(data);
                        },
                        error: function (data) {
                            desactiveLoader();
                            let response = jQuery.parseJSON(data.responseText)
                            activePopupErreur('{{ path('Ajax.Erreur.popupErreurValid') }}', '',  response.erreur);
                        }
                    });
                }

                $(document).ready(function () {
                    $('#listInputSelected input').each(function (index) {
                        $('#input_' + $(this).attr('id').substring(5)).prop("checked", true);
                    });
                });

                $('#input_selectAll').click(function () {
                    var input       = $(this)[0];
                    var count    = parseInt($('#input_selectedCount').val());

                    if ($(input).is(':checked')) {
                        // au clic sur l'input de sélection de tous les contributeurs, on vérifie si certains contributeurs étaient déjà présents dans la liste des contributeurs sélectionnés
                        // si déjà présents, aucun changement, sinon on les ajoute au compteur et à l'input hidden
                        $('.selected_rater').each(function () {
                            var raterId = $($(this)[0]).data('id').toString().replace('.', '#point#');
                            if (!$('#save_selected_rater_' + CSS.escape(raterId)).val()) {
                                count = count + 1;
                                saveRater(raterId);
                            }
                        });
                    } else {
                        // si on décoche l'input de sélection de tous les contributeurs, on fait la démarche inverse 
                        // on retire du compteur ceux qui étaient déjà comptés et on les supprime de l'input hidden
                        $('.selected_rater').each(function () {
                            var raterId = $($(this)[0]).data('id').toString().replace('.', '#point#');
                            if ($('#save_selected_rater_' + CSS.escape(raterId)).val()) {
                                count = count - 1;
                                removeRater(raterId);
                            }
                        });
                    }
                    
                    setCount(count);
                });

                function saveRater(raterId) {
                    $('#listInputSelected').append("<input type='hidden' name='save_selected_rater_" + raterId + "' id='save_selected_rater_" + raterId + "' value='" + raterId + "'/>");
                }

                function removeRater(raterId) {
                    $('#save_selected_rater_' + CSS.escape(raterId)).remove();
                }

                function setCount(count) {
                    $('#selectedCount').html(count);
                    $('#input_selectedCount').val(count);

                    if (count >= 1) {
                        $('#countButton').show();
                    } else {
                        $('#countButton').hide();
                    }    
                }

                $('.selected_rater').click(function () {
                    var input = $(this)[0];

                    var count = parseInt($('#input_selectedCount').val());

                    var raterId = $($(this)[0]).data('id').toString().replace('.', '#point#');

                    if ($(input).is(':checked')) {
                        count = count + 1;
                        saveRater(raterId);
                    } else {
                        count = count - 1;
                        removeRater(raterId);
                    }

                    setCount(count);
                });
            </script>
        </div>
    </form>
{% endblock %}
