{% extends 'base.html.twig' %}

{% block title %}{{parent()}}: Liste des Exercices{% endblock %}

{% block body %}

    {% include 'breadcrumb.html.twig' %}

	<div class=""> {#container-fluid#}
		<div id="ui-view">
			<div>
				<div class="animated fadeIn">
					<div class="row">
						<div class="col">
							<div class="card">

								<div class="card-header">
									<h4 class="d-inline-block m-0">Liste des Composants</h4>

									<div class="card-header-actions">
										<ul class="d-flex list-unstyled m-0">
											{% if est_connecte %}
											<li class="">
												<a class="btn btn-outline-primary btn-new" href="{{ path('courses_composant_create') }}">
													Ajouter un composant
												</a>
											</li>
											{% endif %}
										</ul>
									</div>
								</div>
								<div class="card-body">
									<div class="">
                                        <table id="table_composants" class="table table-responsive ns_fullwidth">
                                            <thead>
                                                <tr class="filtre_line">
                                                    <td class="filtre id" data-column-name="id"></td>
                                                    <td class="filtre titre" data-column-name="titre"></td>
                                                    <td class="filtre niveau" data-column-name="niveau"></td>
                                                    <td class="filtre type" data-column-name="type"></td>
                                                    <td class="filtre langue" data-column-name="langue"></td>
                                                    <td class="filtre datecreation" data-column-name="datecreation"></td>
                                                    <!-- td class="filtre active" data-column-name="active"></td -->
                                                    <td> <!-- pas de filtre sur action --> </td>
                                                </tr>
                                                <tr class="tri_line">
                                                    <th class="col-header id">Numéro</th>
                                                    <th class="col-header titre">Titre</th>
                                                    <th class="col-header niveau">Niveau</th>
                                                    <th class="col-header type">Type</th>
                                                    <th class="col-header langue">Langue</th>
                                                    <th class="col-header datecreation">Date de création</th>
                                                    <!-- th class="col-header active">Active</th -->
                                                    <th class="col-header action">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script>
        window.PATH_COMPOSANTS_JSONLIST ="{{ path('courses_composant_index_json', {'filtre_active':filtre_active})|raw }}";
        window.filtres = [];
        window.filtres_actifs = [];

        function generateButtons(_id, _active){

            path_link = "{{ path('courses_composant_show', {id: '__id__'})|raw }}"
                .replace('__id__', _id);
            path_edit = "{{ path('courses_composant_edit', {id: '__id__'})|raw }}"
                .replace('__id__', _id);
            path_delete = "{{ path('courses_composant_active', {id: '__id__'})|raw }}"
                .replace('__id__', _id);

            icon_html = '<i class="fa fa-recycle"></i>';
            if(_active) {
                icon_html = ' <i class="fa fa-trash"></i> '
            }

            //initialement générés par twig, pour les besoin de DataTable ajaxisée:
            result_html = '<div class="clearfix display_flex">'
                {% if est_connecte %}
                +'<a class="btn btn-primary mr-1" title="Voir" '
                +' target="_blank" '
                +' data-title="Voir" href="'+path_link+'"> '
                +' <i class="fa fa-eye"></i> '
                +'</a>'
                +'<a class="btn btn-outline-primary mr-1" title="Modifier" '
                +' data-title="Modifier" href="'+path_edit+'"> '
                +' <i class="fa fa-edit "></i> '
                +'</a>'
                {% if est_admin %}
                +'<a class="btn btn-dark deleteComp" title="on/off" '
                +' data-title="Activer/Désactiver" href="'+path_delete+'" onclick="return confirm(\'Etes-vous sûr de bien vouloir supprimer ce composant ?\')"> '
                +' '+icon_html+' '
                +'</a>'
                {% endif %}
                {% endif %}
                +'</div>'
            return result_html
        }
        $(document).ready(function() {
             window.table_composants = $('#table_composants').DataTable({
                "pagingType": "input",
                "language": {
                    "url": window.DATATABLE_LANG_JSON
                },
                columnDefs: [
                    {
                        targets: [-1],
                        className: "nowrap",
                        orderable: false,
                        width:"10%",
                    }
                ],
                 /* partie qui ajaxize  */
                 processing: true, //indique que la DataTable peut mettre longtemps à charger
                 serverSide: true, //ajax pour lsiter et chercher données
                 ajax: window.PATH_COMPOSANTS_JSONLIST,
                 sAjaxDataProp: "data",
                 pageLength: 50, //valeur initiale
                 columns:[
                     {"data": "id"}, //sert vraiement pour l'id
                     {"data": "titre"},
                     {"data": "niveau"},
                     {"data": "type"},
                     {"data": "langue"},
                     {"data": "datecreation"},
                     //{"data": "active"}, //inutile depuis liste distincte dans administration/désactivés
                     {"data": "id"}, //en fait pour les boutons d'action
                 ],
                 /* fin partie qui ajaxize */

                 "createdRow": function( row, data, dataIndex ) {
                     //faire un truc quand ligne ajoutée : ajouter boutons
                     var composant_id = data.id,
                         composant_active = data.active
                     $(row).find('td').last().html( generateButtons(composant_id, composant_active) )
                     /* //servait pour la colonen "active"
                     var value_label = 'off'
                     if(composant_active) {
                         value_label = 'on'
                     }
                     $(row).find('td').eq(-2).html(value_label)
                     */
                 },

                 drawCallback: function( settings ) {
                     window.filtres = this.api().context[0].json.filtres
                 },
                 initComplete: function(){

                     //renseigner window.filtres_actifs avec localStorage -> dan GENERER_FILTRES
                     // regénérer les filtres
                     var colonnes_a_mettre_en_select = [3,4],
                         colonnes_a_ignorer = [5]; //colonne action: ne pas filtrer
                     window.GENERER_FILTRES(window.table_composants, colonnes_a_mettre_en_select, colonnes_a_ignorer)



                     //$('#table_eleves tfoot tr').insertAfter($('#table_eleves thead tr'))
                     //fin initComplete
                 },

                 // pour se souvenir des filtres, même quand navigue sur autres pages
                 stateSave: true,
                 stateSaveCallback: function(settings,data) {
                     localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
                 },
                 stateLoadCallback: function(settings) {
                     var data = JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
                     return data
                 }
            });
        })
    </script>
{% endblock %}