{% extends 'layout.twig' %}
{% block body %}
    <div class="contenu clearfix"  id="campaign">
        <h1>
            {{ title }}
        </h1>

        {{ ariane() }}

        <h2 id="divMenu" style="position:relative;">
            {{ campaign.LIBELLE }} {{ 'créée le' | trad }} {{ campaign.DTECREAT | dateTrad }}  {{ 'par' | trad }} {{ campaign.CREATOR }} 
            {{ menuContextuel('campaign', false, campaign.menuContextuel, 7) }}
        </h2>
        <div class="tab-content">
            <div class="padding15">
                {% include '@Evaluation/Campaign/_heading.twig' %}
                {{ arianeSub() }}
			<div style="margin-top:15px;">
				<h3>
					{{ tabTitle }}
				</h3>
				<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 d\'évaluateur(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('{{ path('Evaluation.Rater.validateNewRaters',{mode: mode, id: id, origin: origin, group: group}) }}');">{{ 'Ajouter le(s) évaluateur(s)' | trad }}</a>
						<input type="hidden" id="input_selectedCount" name="selectedCount" value="{{ post.selectedCount ?? 0 }}"/>
						<div id='listInputSelected'>
							{% for key, val in listeSelectInput %}
								<input type='hidden' name='{{ key }}' id='{{ key }}' value='{{ val }}'/>
							{% endfor %}
						</div>
					</div>
					<a type="button" class="button secondaire" style="float:right; margin-bottom: 15px;" href="{{ path('Evaluation.GroupOfRaters.index', { mode: mode, id: id }) }}">{{ '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="15%">{{ triTable('ORIGIN',  post.tri_ORIGIN, 'Origine' | trad,  'refresh_raters',path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}), 'filtre_raters') }}</th>
									<th scope="col" width="">{{ triTable('NOM',  post.tri_NOM, 'Nom' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}), 'filtre_raters') }}</th>
									<th scope="col" width="">{{ triTable('EMAIL',  post.tri_EMAIL, 'E-mail' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}), '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>{{ filterSelect('ORIGIN', post.ORIGIN, originsList, 'refresh_raters', 'text', '', path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}), true, 'Code' | trad) }}</td>
									<td>{{ filterTable('NOM', post.filter_NOM, '', 'refresh_raters', path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}),'filtre_raters', '','Nom' | trad,'',false) }}</td>
									<td>{{ filterTable('EMAIL', post.filter_EMAIL, '', 'refresh_raters', path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}),'filtre_raters', '','E-mail' | trad,'',false) }}</td>
								</tr>
							</tbody>
							{% for rater in raters %}
								<tr id="rater_{{ loop.index }}">
									<td>
                                        <input type="checkbox" 
                                        data-checkall = "allRaters" 
                                        class="form-control checkbox selected_rater" 
                                        data-id="{{ rater.CODE }}" 
                                        id="input_selected_rater_{{ rater.CODE }}" 
                                        name="selected_rater_{{ rater.CODE }}"/>
                                    </td>
									<td>{{ rater.ORIGIN == 'I' ? 'Interne' | trad : 'Externe' | trad }}</td>
									<td>{{ rater.NOM }}</td>
									<td>{{ rater.EMAIL }}</td>
								</tr>
							{% endfor %}
						</table>
						{{ paginations(path('Evaluation.Rater.ratersListForGroup', {mode: mode, id: id, group: group}), infoPagination.nombreDePage, infoPagination.page, infoPagination.post, 'refresh_raters') }}

                        <script>
                            function addRater(path) {
                                activeLoader();
                                var group = '{{ group }}';
                                $.ajax({
                                    dataType	: 'JSON',
                                    url			: path,
                                    data		: $('#filtre_raters').serializeArray(),
                                    type		: "POST",
                                    success: function (data) {
                                        if (data.status == 'O') {
                                            desactiveLoader(); 
                                            redirectJSWithPost('{{ path('Evaluation.GroupOfRaters.index', { mode: mode, id: id }) }}', 
                                                {'group':group }
                                            );
                                        } else {
                                            desactiveLoader();
                                            activePopupErreur('{{ path('Ajax.Erreur.popupErreurValid') }}', '',  data.error);
                                        }
                                    }
                                });
                            }
    
                            $(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 évaluateurs, on vérifie si certains évaluateurs étaient déjà présents dans la liste des évaluateurs 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('.', 'OxapointOxa');
                                        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 évaluateurs, 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('.', 'OxapointOxa');
                                        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('.', 'OxapointOxa');
                    
                                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>
			</div>
		</div>
	</div>
{% endblock %}
