{% extends 'layout.twig' %}

{% block body %}
<div id="fournisseurs" class="contenu clearfix">
    <h1>{{ 'Gestion des évaluations' | trad }}</h1>
    {{ ariane() }}
    <h2 id="divMenu" style="position:relative;">
        {{ campaign.LIBELLE }} {{ 'créée le' | trad }} {{ campaign.DTECREAT | dateTrad }}  {{ 'par' | trad }} {{ campaign.CREATOR }} 
    </h2>
    <div class="tab-content">
        <div id="gestion-fournisseur" class="tab-pane fade in active">
            <div class="padding_form border_form">
                {% include "@Evaluation/Campaign/Fournisseur/suppliers_filters.twig" %}
                <div id="suppliers" style="margin-top:20px;">
                    <form method="post" name="filtre_choixFrs" id="filtre_choixFrs">
                        <div id="buttonRegroup" style="display: none;">
                            <div style="margin-bottom: 10px; margin-top: 10px; font-weight: bold; width: 100%;position: relative;">
                                <span style="font-weight: bold; position:relative; top: 15px;">
                                    {{ 'Nombre de fournisseur(s) sélectionné(s)' | trad }}
                                    :
                                </span>
                                <span style="font-weight: bold; position:relative; top: 15px;" id="countSelected">{{ post.countSelected ?? 0 }}</span>
                                <button type="button" class="button principal" style="float: right; margin-right: 0;" onclick="addFrs('{{ path('Evaluation.Campaign.addSupplier',{id:campaign.ID_CAMP}) }}');">{{ 'Ajouter le(s) fournisseur(s)' | trad }}</button>
                            </div>
                            <input type="hidden" id="input_countSelected" name="countSelected" value="{{ post.countSelected ?? 0 }}"/>
                            <div id='listInputSelected'>
                                {% for key, val in listeSelectInput %}
                                    <input type='hidden' name='{{ key }}' id='{{ key }}' value='{{ val }}'/>
                                {% endfor %}
                            </div>
                        </div>
                        <div id="divRefreshFrs" class="clearfix">
                            <div>
                            <table class="table table-hover">
                                <thead class="thead-dark">
                                    <tr>
                                        <th></th>
                                        <th scope="col" width="">{{ triTable('RS',  post.tri_RS, 'Raison sociale (Code)' | trad, '', 'divRefreshFrs', 'filtre_choixFrs') }}</th>
                                        <th scope="col" width="">{{ triTable('CPOSTAL',  post.tri_CPOSTAL, 'Code postal' | trad, '', 'divRefreshFrs', 'filtre_choixFrs') }}</th>
                                        <th scope="col" width="">{{ triTable('VILLE1',  post.tri_VILLE1, 'Ville' | trad, '', 'divRefreshFrs', 'filtre_choixFrs') }}</th>
                                        <th scope="col" width="">{{ triTable('ADR',  post.tri_ADR, 'Adresse' | trad, '', 'divRefreshFrs', 'filtre_choixFrs') }}</th>
                                        <th scope="col" width="">{{ 'Sous-famille' | trad }}</th>
                                        <th scope="col" width="">{{ 'Type' | trad }}</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 = "allSuppliers" 
                                                class="form-control checkbox">
                                        </td>
                                        <td>{{ filterTable('RS', post.filter_RS, '', 'divRefreshFrs', '','filtre_choixFrs', '','Désignation' | trad,'',true) }}</td>
                                        <td>{{ filterTable('CPOSTAL', post.filter_CPOSTAL, '', 'divRefreshFrs', '','filtre_choixFrs', '','Code postal' | trad,'',true) }}</td>
                                        <td>{{ filterTable('VILLE1', post.filter_VILLE1, '', 'divRefreshFrs', '','filtre_choixFrs', '','Ville' | trad,'',true) }}</td>
                                        <td>{{ filterTable('ADR', post.filter_ADR, '', 'divRefreshFrs', '','filtre_choixFrs', '','Adresse' | trad,'',true) }}</td>
                                        <td>{{ zoomFilter('listeSousFamille', post.filter_listeSousFamille, '', 'filtre_choixFrs', path('Ajax.liste.sousFamille'), 'Liste des sous-familles' | trad, '','', 'Sous-famille' | trad) }}</td>
                                        <td>{{ filterSelect('TYPE', post.filter_TYPE, supplierTypes, 'filtre_choixFrs', '', '', '', '') }}</td>
                                    </tr>
                                </tbody>
                                {% for frs in listeFrs %}
                                    <tr id="Frs{{ loop.index }}">
                                    <td>
                                        <input type="checkbox" 
                                        data-checkall = "allSuppliers" 
                                        class="form-control checkbox selected_frs" 
                                        data-id="{{ frs.CODE }}" 
                                        id="input_selected_frs_{{ frs.CODE }}" 
                                        name="selected_frs_{{ frs.CODE }}"/>
                                    </td>		
                                    {# <td>
                                        <input type="checkbox" 
                                            class="form-control checkbox selected_frs" 
                                            data-id="{{ frs.CODE }}" 
                                            id="input_selected_frs_{{ frs.CODE }}" 
                                            name="selected_frs_{{ frs.CODE }}"/>
                                    </td> #}
                                        <td>{{ frs.RS ~ ' (' ~ frs.CODE ~ ')' }}</td>
                                        <td>{{ frs.CPOSTAL }}</td>
                                        <td>{{ frs.VILLE1 }}</td>
                                        <td>{{ shortLibelle( frs.ADR, 50) }}</td>
                                        <td>{{ shortLibelle( frs.listeSousFamille , 50) }}</td>
                                        <td>{{ supplierTypes[frs.TYPE] }}</td>
                                    </tr>
                                {% endfor %}
                            </table>
                            {{ paginations(path('Evaluation.Campaign.supplierList', {id:id}),infoPagination.nombreDePage, infoPagination.page, infoPagination.post, 'divRefreshFrs') }}
                            <script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
                            <script>
                                function addFrs(path) {
                                    activeLoader();
                                    $.ajax({
                                        dataType: 'html',
                                        url: path,
                                        data: $('#filtre_choixFrs').serializeArray(),
                                        type: "POST",
                                        success: function (result) {
                                            redirectJSWithPost('{{ path('Evaluation.Campaign.detail',{id:id, tab:'fournisseur'}) }}');
                                            desactiveLoader();
                                        }
                                    });
                                }

                                $('#input_selectAll').click(function () {
                                    var input       = $(this)[0];
                                    var count    = parseInt($('#input_countSelected').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_frs').each(function () {
                                            var supplierId = $($(this)[0]).data('id').toString().replace('.', 'Oxa');
                                            if (!$('#save_selected_frs_' + supplierId).val()) {
                                                count = count + 1;
                                                saveSupplier(supplierId);
                                            }
                                        });
                                    } 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_frs').each(function () {
                                            var supplierId = $($(this)[0]).data('id').toString().replace('.', 'OxapointOxa');
                                            if ($('#save_selected_frs_' + supplierId).val()) {
                                                count = count - 1;
                                                removeSupplier(supplierId);
                                            }
                                        });
                                    }
                                    
                                    setCount(count);
                                });

                                function setCount(count) {
                                    $('#countSelected').html(count);
                                    $('#input_countSelected').val(count);
                        
                                    if (count >= 1) {
                                        $('#buttonRegroup').show();
                                    } else {
                                        $('#buttonRegroup').hide();
                                    }    
                                }

                                function saveSupplier(supplierId) {
                                    $('#listInputSelected').append("<input type='hidden' name='save_selected_frs_" + supplierId + "' id='save_selected_frs_" + supplierId + "' value='" + supplierId + "'/>");
                                }
                        
                                function removeSupplier(supplierId) {
                                    $('#save_selected_frs_' + supplierId).remove();
                                }

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

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

                                    var oldCount = parseInt($('#input_countSelected').val());

                                    var idFrs = $($(this)[0]).data('id');
                                    if ($(input).is(':checked')) {
                                        var newCount = oldCount + 1;
                                        $('#listInputSelected').append("<input type='hidden' name='save_selected_frs_" + idFrs + "' id='save_selected_frs_" + idFrs + "' value='1'/>");
                                    } else {
                                        var newCount = oldCount - 1;
                                        $('#save_selected_frs_' + idFrs).remove();
                                    }

                                    $('#countSelected').html(newCount);
                                    $('#input_countSelected').val(newCount);

                                    if (newCount >= 1) {
                                        $('#buttonRegroup').show();
                                    } else {
                                        $('#buttonRegroup').hide();
                                    }
                                });
                            </script>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
