{% 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;">
					<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: 'external'}) }}');">{{ '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 principal" style="float:right; margin-bottom: 15px;" href="{{ path('Evaluation.Rater.newExternalRater',{mode: mode, id: id}) }}">{{ 'Enregistrer un nouvel évaluateur externe ?' | trad }}</a>
						<a type="button" class="button secondaire" style="float:right; margin-bottom: 15px;" href="{{ path('Evaluation.Rater.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></th>
										<th scope="col" width="">{{ triTable('NOM_NOTEUR',  post.tri_NOM_NOTEUR, 'Nom' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}), 'filtre_raters') }}</th>
										<th scope="col" width="">{{ triTable('EMAIL_NOTEUR',  post.tri_EMAIL_NOTEUR, 'E-mail' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}), 'filtre_raters') }}</th>
										<th scope="col" width="">{{ triTable('FCT_NOTEUR',  post.tri_FCT_NOTEUR, 'Fonction' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}), 'filtre_raters') }}</th>
										<th scope="col" width="">{{ triTable('SOC_NOTEUR',  post.tri_SOC_NOTEUR, 'Société' | trad,  'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}), '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('NOM_NOTEUR', post.filter_NOM_NOTEUR, '', 'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}),'filtre_raters', '','Nom' | trad,'',false) }}</td>
										<td>{{ filterTable('EMAIL_NOTEUR', post.filter_EMAIL_NOTEUR, '', 'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}),'filtre_raters', '','E-mail' | trad,'',false) }}</td>
										<td>{{ filterTable('FCT_NOTEUR', post.filter_FCT_NOTEUR, '', 'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}),'filtre_raters', '','E-mail' | trad,'',false) }}</td>
										<td>{{ filterTable('SOC_NOTEUR', post.filter_SOC_NOTEUR, '', 'refresh_raters', path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}),'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.ID_NOTEUR }}" 
                                                id="input_selected_rater_{{ rater.ID_NOTEUR }}" 
                                                name="selected_rater_{{ rater.ID_NOTEUR }}"/>
                                        </td>
										<td>{{ rater.NOM_NOTEUR }}</td>
										<td>{{ rater.EMAIL_NOTEUR }}</td>
										<td>{{ rater.FCT_NOTEUR }}</td>
										<td>{{ rater.SOC_NOTEUR }}</td>
									</tr>
								{% endfor %}
							</table>
							{{ paginations(path('Evaluation.Rater.ratersListForCampaign', {mode: mode, id: id, origin: origin}), infoPagination.nombreDePage, infoPagination.page, infoPagination.post, 'refresh_raters') }}
                            <script>
                                function addRater(path) {
                                    activeLoader();
                                    $.ajax({
                                        dataType	: 'JSON',
                                        url			: path,
                                        data		: $('#filtre_raters').serializeArray(),
                                        type		: "POST",
                                        success: function (data) {
                                            if (data.status == 'O') {
                                                desactiveLoader(); 
                                                redirectJSWithPost('{{ path('Evaluation.Rater.index', { mode: mode, id: id }) }}');
                                            } 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_' + 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>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
{% endblock %}
