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

{% block title %}{{parent()}}: Elève dans la formation{% endblock %}

{% set eleve = formation_eleve.eleve %}
{% set eleve_id = formation_eleve.eleve.id %}
{% set formation = formation_eleve.formation %}
{% set formation_id = formation.id %}

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

    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">

                    <div class="card">
                        <div class="card-header">
                            <h4 class="d-inline-block m-0">Leçon {{ lecon.id }} - {{ lecon.libelle }}</h4>
                        </div>
                        <div class="card-body">

                            <div class="row">

                                {% set counterAct = 0 %}

                                {% for eleve_activite in eleve_activites %}
                                    {% set activite = eleve_activite.eleveActivite.activite %}
                                    <!-- Activité -->
                                    <div class="col-12">
                                        <div class="card card-bilan">
                                            <div class="card-header">
                                                <h4 class="d-inline-block m-0">Activite {{ activite.id }} - {{ activite.libelle }}</h4>
                                            </div>
                                            <div class="card-body table-responsive">
                                                {% include '@Courses/Lecon/index_inner_details.html.twig' %}
                                                {% set counterAct = counterAct+1 %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>
                        </div>
                    </div> <!-- fin de la carte principale -->
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script>

        window.FORMATION_ELEVE = "{{ formation_eleve.id }}";
        window.LECON = "{{ lecon.id }}";
        window.MODULE = "{{ module.id }}";
        window.ELEVE_LECON = "{{ eleve_lecon.id }}";

        window.PATH_ACTIVITE_TENTATIVES = "{{ path('formation_formationeleve_tentative_json', {
            'activite_id':'__idActivite__',
            'eleve_lecon_id':eleve_lecon.id
        })|raw }}";

        window.PATH_DETAIL_TENTATIVE = "{{ path('formation_formationeleve_tentative_details_json', {
            'id':'__idTentative__',
        })|raw }}";

        $(document).ready(function() {

            // Faire un each sur toutes les activités trouvées
                // Créer un tableau en appelant la vue index_inner_details
                // Initialiser le datatable sur le tableau créé

            $('.table_details').each(function( index, element ) {
                var idAct = $(this).attr('data-id'),
                    pathTentative = PATH_ACTIVITE_TENTATIVES.replace('__idActivite_', idAct),
                    table_id = $(this).attr('id');

                window['filtres_'+table_id] = [];
                window['filtres_actifs_'+table_id] = [];

                window[table_id] = $(this).DataTable({
                    "language": {
                        "url": window.DATATABLE_LANG_JSON
                    },
                    /* partie qui ajaxize  */
                    processing: true,
                    serverSide: true,
                    ajax: pathTentative,
                    sAjaxDataProp: "data",
                    pageLength: 10,
                    columns: [
                        {"data": "tentative"},
                        {"data": "etat"},
                        {"data": "date"},
                        {"data": "completude"},
                        {"data": "note"},
                        {"data": "cpt_todo"},
                    ],
                    /* fin partie qui ajaxize */
                    createdRow: function (row, data, dataIndex) {
                        if(data.cpt_todo>0) {
                            $(row).addClass('colorred')
                        } else {
                            $(row).addClass('colorgreen')
                        }
                        $(row).attr('data-id', data.id);
                        if(data.statut !== "En cours"){
                            $(row).addClass('ns_row_selectable');
                            $(row).on('click', function callbackRowClicked() {
                                var tentative_id = $(this).attr('data-id'),
                                    hrefTentative = PATH_DETAIL_TENTATIVE.replace('__idTentative__', tentative_id);
                                window.location = hrefTentative;
                            })
                        }
                    },
                    drawCallback: function (settings) {
                        window['filtres_'+table_id] = this.api().context[0].json.filtres
                    },
                    initComplete: function () {
                        var colonnes_a_mettre_en_select = [0,1];
                        window.GENERER_FILTRES(window[table_id], colonnes_a_mettre_en_select);
                    }
                });
            });
        })
    </script>
{% endblock %}