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

{% block title %}{{parent()}}: Leçon {{ lecon.libelle }}{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}
    {% set counter_activite = 1 %}
    {% set counter = 1 %} {# compteur de composant #}

    {% set lecon_validee = false %}
    {% if eleve_lecon.datevalidation %}
        {% set lecon_validee = true %}
    {% endif %}

    <input type="hidden" id="formation_id" value="{{ formation_id }}" />
    <input type="hidden" id="module_id" value="{{ module_id }}" />
    <div class="container-fluid eleve_lecon_parcours {% if lecon_validee %}lecon_validee terminee{% endif %}">
        <div class="row">
            <div class="col-sm-12 col-xl-9">

            {% for iter_module in parcours %}
                {% for iter_lecon in iter_module.lecons %}
                    {% if iter_lecon.lecon.id == lecon.id %}
                        {# ancre cachée, décalée en CSS pour ne pas être coincé and on navigue depuis "mon parcours" #}
                        <div class="ancre_cachee" id="lecon_id_{{ lecon.id }}"></div>

                        <div class="card lecon" data-id="{{ lecon.id }}"
                             data-pointeur="lecon_id_{{ lecon.id }}">
                            <div class="card-header">
                                <h1 class="m-0"><i class="fa fa-folder-o fa-lg iconLecon mr-2" aria-hidden="true"></i> {#Leçon #{{ lecon.id }} - #}{{ lecon.libelle }}</h1>
                            </div>
                            <div class="card-body">

                            {% for iter_activite in iter_lecon.activites %}
                                {% set activite = iter_activite.activite %}

                                {#{% for activite in activites %} -> faisait doublon avec la remontée du parcours #}
                                {# ancre cachée, décalée en CSS pour ne pas être coincé and on navigue depuis "mon parcours" #}
                                <div class="ancre_cachee" id="activite_id_{{ activite.id }}"></div>

                                {% set class_activite_terminee = '' %}
                                {% if sessions_tentatives[activite.id].etat>=1 %}
                                    {% set class_activite_terminee = 'terminee' %}
                                {% endif %}

                                <div class="card Activite{{ counter_activite }} activite border-danger {{ class_activite_terminee }}"
                                     data-pointeur="activite_id_{{ activite.id }}"
                                     data-id="{{ activite.id }}"
                                     data-index="{{ counter_activite }}">
                                    <div class="card-header">
                                        <h2 class="m-0"><i class="fa fa-files-o fa-lg mr-2" aria-hidden="true"></i> Activité n°{{ activite.id }} - {{ activite.libelle }}</h2>
                                    </div>
                                    <div class="card-body ajax_load_activite"
                                         data-cle="activite_{{ formation_id ~ '_' ~ module_id ~ '_' ~ lecon.id ~ '_' ~ activite.id }}"
                                         data-href="{{ path('courses_activite_index', {
                                             'id':activite.id,
                                             'formation_id': formation_id,
                                             'module_id': module_id,
                                             'lecon_id': lecon.id,
                                             'counter_activite': counter_activite,
                                             'ajax':true,
                                             'with_session_reponse': '__with_session_reponse__'
                                         }) }}">
                                        {# lister tous les composants de cette activité #
                                        {{ render(controller(
                                            'CoursesBundle:Activite:index', {
                                                'id': activite.id,
                                                'formation_id': formation_id,
                                                'module_id': module_id,
                                                'lecon_id': lecon.id,
                                                'counter_activite': counter_activite
                                            }
                                        )) }}
                                        #}
                                    </div>
                                </div>
                                {% set counter_activite = counter_activite+1 %}
                            {% endfor %}
                                <div class="footer-lecon d-flex">
                                <input type="button" class="ns_btn_lesson_validated lesson_validee btn btn-inline-block btn-dark p-2 px-5 mb-3 mx-2 ml-auto"
                                   disabled="disabled"
                                    {% if not lecon_validee %}
                                        hidden="hidden"
                                    {% endif %}
                                   value="Leçon validée le {{ eleve_lecon.datevalidation|date('d/m/Y à H:i') }}" />

                                {#<input type="button" class="lesson_submit btn btn-inline-block btn-success p-2 px-5 mb-3"
                                       value="&#xf114 valider la leçon" />#}
                                <button type="button"
                                {% if lecon_validee %}
                                    hidden="hidden"
                                {% endif %}
                                        class="ns_btn_lesson_submit lesson_submit btn btn-inline-block btn-success active p-2 px-5 mb-3 mx-2 ml-auto">
                                    <i class="fa fa-folder-o fa-lg mr-2" aria-hidden="true"></i>
                                    valider la leçon
                                </button>
                                </div>
                            </div>
                        </div>

                    {% endif %}
                {% endfor %}
            {% endfor %}
            </div>

            {# partie de droite : "mon parcours" #}
        {% if avec_parcours %}
            <div class="col-sm-12 col-xl-3 super_wrapper_parcours">
                {# pour rechargement javascript, au cas où #}
                {% set parcours_href = path('courses_lesson_show_activities', {
                    'id': lecon.id,
                    'module_id': module_id,
                    'formation_id': formation_id,
                    'duree': duree
                }) %} {# cette durée est incrémentée par javascript #}
                <div class="card wrapper_parcours"
                     data-href="{{ parcours_href }}">
                    <div class="card-header d-flex align-items-center bg-secondary text-white p-3">
                        <h3 class="d-inline-block m-0">Mon parcours</h3>
                        {#
                        <div class="card-header-actions ml-auto">
                            <ul class="d-flex list-unstyled m-0">
                                {% if est_connecte %}
                                    <li class="">
                                        <button class="btn btn-outline-primary btn-new"
                                                title="Recharger/Nouvelle session"
                                                onclick="rechargerParcours()">
                                            <i class="fa fa-repeat"></i>
                                        </button>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                        #}
                    </div>
                    <div class="card-body">
                        {% include '@Courses/Lecon/parcours.html.twig' with {
                            'lecon': lecon,
                            'parcours': parcours,
                            'formation_id': formation_id,
                            'module_id': module_id,
                            'duree': duree
                        } %}
                    </div>
                </div>
            </div>
        {% endif %} {# fin si avec_parcours #}
        </div>
    </div>

    <!-- TIMER -->
    {% if moduleLecon.retry == false and lecon_validee == false %}
        <div id="myTimerDiv"
             style="position: fixed; bottom: 20px; right: 20px; width: 150px; height: 30px; border-radius: 1em; background-color:#66d1bf; color:white; {% if lecon_validee %}display:none !important{% endif %}"
             class="d-flex"
        >
            <p id="myTimer" style="font-weight: bold; font-size: 18px" class="m-auto"></p>
        </div>
    {% endif %}
{% endblock %}

{% block body_before_end %}
    {{ parent() }}
    {{ tinymce_init() }}

    <!-- temporaire -->
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>
    {# {theme: {'advanced':{'height': 300 }}} #}

    <!-- HTML POUR POPPIN -->
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'wide': true,
        'suffixe_id': '_default'
    } only %}

    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'narrow': true,
        'suffixe_id': '_recap'
    } only %}

    {# ce popin devant pouvoir apparaître au-dessus des autres, il est placé plus bas dans HTML: #}
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : false,
        'show_cancel_popin' : false,
        'medium': true,
        'suffixe_id': '_idle'
    } only %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/ns_module_activite.css') }}" rel="stylesheet" >
{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/idle-timer.1.1.0.min.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_media_gallery.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_media_createedit.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_multipleChoice.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillSD.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillW.js') }}?{{ date().timestamp }}"></script>

    <script type="text/javascript" src="{{ asset('js/jsplumb.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_association.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites_openQuestion.js') }}?{{ date().timestamp }}"></script>

    <script>
        window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true, 'simple_vue':true})|raw }}";
        window.PATH_RECAP_LECON = "{{ path('courses_lesson_recap', {
            'id': lecon.id,
            'formation_id': formation_id,
            'module_id': module_id}) }}";
        window.PATH_RECAP_ACTIVITE = "{{ path('courses_activite_recap', {
            'id': '__id__',
            'formation_id': formation_id,
            'module_id': module_id,
            'lecon_id': lecon.id}) }}";
        window.PATH_CORRECTIONS = "{{ path('courses_reponse_corrections') }}"
        window.PATH_LECON_END = "{{ path('courses_lesson_finir_session', {
            'id': lecon.id,
            'formation_id': formation_id,
            'module_id': module_id
        }) }}"
        window.PATH_ACTIVITE_RETRY = "{{ path('courses_activite_recommencer', {
            'id': '__id__',
            'formation_id': formation_id,
            'module_id': module_id,
            'lecon_id': lecon.id,
            'counter_activite': '__counter_activite__',
            'with_session_reponse': '__with_session_reponse__'
        }) }}"
        window.notes_recap = {}; //pour chaque activité, liste les composants ; pour chaque composant, indique la note et si c'est réussi.
        window.pathMajDureeTr = "{{ path('courses_lesson_majdureetr', {'formation_id': formation_id,'module_id': module_id, 'lecon_id': lecon.id, 'eleve_id': app.user.id,}) }}";


        // rempli par twig
        {% for iter_module in parcours %}
            {% for iter_lecon in iter_module.lecons if iter_lecon.lecon.id == lecon.id %}
                {% for iter_activite in iter_lecon.activites %}
                    {% for iter_composant in iter_activite.composants %}

                        {% set type_id = iter_composant.composant.type.id %}
                        {% set est_exo = (type_id == 1) or (type_id == 2) or (type_id == 3) or (type_id == 4) or (type_id == 5) %}
                        {% if est_exo %}
                            {# en croisant les doigts très fort, on espère que les loop.index coïncideront avec counter_activite et counter #}
                            {# Je pense qu'il faut aussi serrer les fesses #}
                            {% set counter = loop.index %}
                            {% set counter_activite = loop.parent.loop.index %}
                            {% set pos_cle = counter_activite ~ '_' ~ counter %}
                            {% set note_pc = 0 %}
                            {% if iter_composant.denominateur != 0 %}
                                {% set note_pc = ((100*iter_composant.numerateur/iter_composant.denominateur) |round |number_format ) ~ '%' %}
                            {% endif %}
                            window.notes_recap['{{ pos_cle }}'] = {
                                'note': '{{ note_pc }}',
                                //'succes': data.success, //comment savoir? la stocker aussi dans parcours?
                                'composant_id': {{ iter_composant.id }},
                                'activite_id': {{ iter_activite.id }},
                            };
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            {% endfor %}
        {% endfor %}

        $(function () {
            window.activerAjaxLecon();//voir courses_lecon_showactivites.js

            {% if avec_parcours %} {# c'est à dire, en vue élève (et pas juste aperçu prof) #}
            setTimeout(function() {
                // s'il y a (au moins) un exercice qui n'est pas validé (potentiellement des données en cours)
                if ($('.activite:not(.terminee):not(.videe)').length > 0) {
                    window.activerBeforeunload();//si l'utilisateur veut partir avant d'avoir répondu aux questions
                    //ce contrôle est levé par submitNoteToParcours, si tous les exercices sont effectués

                    //activer détection si le site est oisif:
                    $(document).idleTimer({timeout: window.IDLE_DELAY});

                    //n'incrémente durée que si il reste quelque chose à faire
                    window.initTimer();
                }

                //si la leçon est déjà finie, montrer le bouton pour la suivante (au sein du module, non encore terminée)
                if($('.lecon_validee.terminee').length>0){
                    finirLecon(true);
                }

                //ajuster dimensions parcours
                var width_super_parcours = parseInt($('.super_wrapper_parcours').css('width'))-30, //-30 pour laisser place pour scroll vertical

                    height_breadcrumb = parseInt($('.breadcrumb').css('height').replace('px', ''))
                        + parseInt($('.breadcrumb').css('margin-bottom').replace('px', ''))
                        + parseInt($('.breadcrumb').css('margin-top').replace('px', '')),
                    height_mainheader = parseInt($('.main-header').css('height').replace('px', ''))
                        + parseInt($('.main-header').css('margin-bottom').replace('px', ''))
                        + parseInt($('.main-header').css('margin-top').replace('px', '')),
                    height_bottom     = parseInt($('.breadcrumb').css('margin-bottom').replace('px', '')),
                    height_top = height_breadcrumb + height_mainheader + height_bottom;

                $('.wrapper_parcours').css('width', width_super_parcours+'px');
                $('.wrapper_parcours').css('height', 'calc(100% - ' + height_top + 'px)');
            }, 200);
            {% endif %}

            /*window.onbeforeunload = null;
            $(window).bind("beforeunload", function(e){
                console.log('oui');
                e.preventDefault();
                e.stopImmediatePropagation();
                e.stopPropagation();
                return false;
            });*/

            // Set the date we're counting down to
            window.dureeLeconBase = "{{ dureeLecon }}"*60;
            window.dureeTR = "{{ eleve_lecon.dureeTR }}";

            window.dureeLecon = dureeLeconBase - dureeTR;

            window.lecon_validee = false;
            {% if eleve_lecon.datevalidation %}
                window.lecon_validee = true;
            {% endif %}

            window.isretry = false;
            {% if moduleLecon.retry %}
                window.isretry = true;
            {% endif %}

            console.log(window.lecon_validee);
            console.log('dureeTR:'+dureeTR);

            // maj durée en temp réel toutes les 5s
            window.launchTimer = function(){
                if(dureeLeconBase > 0 && isretry == false) {
                    window.y = setInterval(function () {
                        $.post(window.pathMajDureeTr, {
                            session_duree: parseInt($('#session_duree').val()),
                            remiseazero: false
                        }, function success(data) {
                        });
                    }, 5000);

                    // Update the count down every 1 second
                    window.x = setInterval(function () {
                        if (window.lecon_validee === false) {
                            $('#myTimerDiv').css('display', 'block');
                            // Time calculations for days, hours, minutes and seconds
                            var hours = Math.floor(dureeLecon / 3600);
                            var minutes = Math.floor((dureeLecon - (hours * 3600)) / 60);
                            var seconds = Math.floor(dureeLecon - (hours * 3600) - (minutes * 60));

                            // Output the result in an element with id="demo"
                            var text = "";
                            if (hours > 0) {
                                text = hours + "h ";
                            }
                            if (minutes > 0 || hours > 0) {
                                text = text + "" + minutes + "m ";
                            }
                            if (minutes > 0 || hours > 0 || seconds > 0) {
                                text = text + "" + seconds + "s ";
                            }

                            if (dureeLecon < 180) {
                                $('#myTimerDiv').css('color', '#de473a');
                            }
                            $("#myTimer").text(text);

                            // If the count down is over, write some text
                            if (dureeLecon <= 0) {
                                clearInterval(window.x);
                                clearInterval(window.y);
                                $("#myTimer").text("Terminé !");
                                $('.lesson_submit').click();
                                /*$('.lesson_submit').attr('disabled', 'disabled');
                                $('.activite_submit').attr('disabled', 'disabled');
                                $('.submitExercice').attr('disabled', 'disabled');*/
                            }
                            dureeLecon--;
                        }
                    }, 1000);
                }
            };

            window.stopTimer = function(){
                clearInterval(window.y);
                clearInterval(window.x);
            };

            // si activité non validé : lancer timer
            if(window.lecon_validee === false){
                window.launchTimer();
            }
        });
    </script>
{% endblock %}