{% 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="addContributors();">{{ 'Ajouter le(s) contributeur(s)' | trad }}</a>
            <input type="hidden" id="input_selectedCount" name="selectedCount" value="{{ post.selectedCount ?? 0 }}"/>
            <div id='listInputSelected'>
            </div>
        </div>
        <a type="button" class="button secondaire" style="float:right; margin-bottom: 15px;" href="{{ path('Consultation.Contributor.index', { idAO: idAO }) }}">{{ 'Annuler' | trad }}</a>
        <div id="refresh_raters" class="clearfix" style="margin-top: 20px;">
            <table class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th></th>
                        <th scope="col" width="">{{ triTable('CODE_STE',  post.tri_CODE_STE, 'Société' | trad, 'refresh_raters',path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), 'filtre_raters') }}</th>
                        <th scope="col" width="">{{ triTable('CODE',  post.tri_CODE, 'Code' | trad, 'refresh_raters',path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), 'filtre_raters') }}</th>
                        <th scope="col" width="">{{ triTable('NOM',  post.tri_NOM, 'Nom' | trad, 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), 'filtre_raters') }}</th>
                        <th scope="col" width="">{{ triTable('FONCTION',  post.tri_FONCTION, 'Fonction' | trad, 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), 'filtre_raters') }}</th>
                        <th scope="col" width="">{{ triTable('EMAIL',  post.tri_EMAIL, 'E-mail' | trad, 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), 'filtre_raters') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="recherche">
                        <td scope="col" class="align-center white-tooltip" width="4%">
                            <input 
                                name="selectAll" 
                                type="checkbox" 
                                id="input_selectAll" 
                                data-checkall-input = "allRaters" 
                                class="form-control checkbox">
                        </td>
                        <td>{{ filterTable('CODE_STE', post.filter_CODE_STE, '', 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}),'filtre_raters', '','Société' | trad,'',false) }}</td>
                        <td>{{ filterTable('CODE', post.filter_CODE, '', 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}),'filtre_raters', '','Code' | trad,'',false) }}</td>
                        <td>{{ filterTable('NOM', post.filter_NOM, '', 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}),'filtre_raters', '','Nom' | trad,'',false) }}</td>
                        <td>{{ filterTable('FONCTION', post.filter_FONCTION, '', 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}),'filtre_raters', '','Fonction' | trad,'',false) }}</td>
                        <td>{{ filterTable('EMAIL', post.filter_EMAIL, '', 'refresh_raters', path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}),'filtre_raters', '','E-mail' | trad,'',false) }}</td>
                    </tr>
                </tbody>
                {% for contributor in contributors %}
                    <tr id="rater_{{ loop.index }}">
                        <td>
                            <input type="checkbox" 
                            data-checkall = "allRaters" 
                            class="form-control checkbox selected_contributor" 
                            data-id="{{ contributor.CODE }}" 
                            id="input_selected_contributor_{{ contributor.CODE }}" 
                            name="selected_contributor_{{ contributor.CODE }}"/>
                        </td>
                        <td>{{ contributor.CODE_STE }}</td>
                        <td>{{ contributor.CODE }}</td>
                        <td>{{ contributor.NOM }}</td>
                        <td>{{ contributor.FONCTION }}</td>
                        <td>{{ contributor.EMAIL }}</td>
                    </tr>
                {% endfor %}
            </table>
            {{ paginations(path('Consultation.Contributor.contributorsListForRfx', {idAO : idAO}), infoPagination.nombreDePage, infoPagination.page, infoPagination.post, 'refresh_raters') }}
            <script>
                function addContributors() {
                    activeLoader();
                    $.ajax({
                        url: {{ path(
                            'Consultation.Contributor.validateNewContributors',
                            {idAO: idAO}
                        ) | json }},
                        type: 'POST',
                        data: $('#filtre_raters').serializeArray(),
                        dataType: 'html',
                        success: function (data) {
                            location.reload();
                        },
                    });
                }

                $(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_contributor').each(function () {
                            var raterId = $($(this)[0]).data('id').toString().replace('.', '#point#');
                            if (!$('#save_selected_contributor_' + 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_contributor').each(function () {
                            var raterId = $($(this)[0]).data('id').toString().replace('.', '#point#');
                            if ($('#save_selected_contributor_' + CSS.escape(raterId)).val()) {
                                count = count - 1;
                                removeRater(raterId);
                            }
                        });
                    }                    
                    setCount(count);
                });
        
                function saveRater(raterId) {
                    $('#listInputSelected').append("<input type='hidden' name='save_selected_contributor_" + raterId + "' id='save_selected_contributor_" + raterId + "' value='" + raterId + "'/>");
                }
        
                function removeRater(raterId) {
                    $('#save_selected_contributor_' + CSS.escape(raterId)).remove();
                }
        
                function setCount(count) {
                    $('#selectedCount').html(count);
                    $('#input_selectedCount').val(count);
        
                    if (count >= 1) {
                        $('#countButton').show();
                    } else {
                        $('#countButton').hide();
                    }    
                }
        
                $('.selected_contributor').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>
        <script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
    </form>
{% endblock %}
