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

{% block title %}{{parent()}}: Présence en cours{% 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-lg-10 mx-auto">
                            <div class="card">
                                <div class="card-header px-5 d-flex align-items-center">
                                    <h1 class="my-0 d-inline-block m-0">Présence en cours</h1>

                                    <div class="card-header-actions ml-auto">
                                        <ul class="d-flex list-unstyled m-0">
                                            {% if est_admin or ((est_prof or est_sousprof) and app.user.id in formation.profs) %}
                                                <li class="">
                                                    <div id="createCours" class="btn btn-outline-primary btn-new" data-href="{{ path('courses_presence_creat', {'id':formation.id}) }}">
                                                        Ajouter un cours
                                                    </div>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                                <div id="bodybox" class="card-body p-5">
                                    {% include "@Courses/Presence/index_inner.html.twig" %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_before_end %}
    <!-- HTML POUR POPPIN-I-FIEUR -->
    {% include 'generic_popin.html.twig' with {
        'contenu': '__CONTENU__',
        'titre': '__TITRE__',
        'show_validate_popin' : true,
        'show_cancel_popin' : true,
        'wide': true
    } only %}
{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            var datahref = "{{ path('courses_presence_edi', {'id':'__coursid__'}) }}";
            var deletehref = "{{ path('courses_presence_del', {'id':'__coursid__'}) }}";
            var indexhref = "{{ path('courses_presence_index', {'id':formation.id}) }}";

            $('#createCours')
                .off('click')
                .on('click', function ouvrirPopinCreatetComposant2() { //APPEL OUVERTURE DU POP-IN

                    var path = $(this).attr('data-href'),
                        titre = "Présence en cours";

                    //1. renseigner popin avec contenu de $(this).attr('data-href')
                    $.get(path, function success(data) {
                        $('.modal .modal-body').html(data);
                        $('.modal .modal-title').html(titre);

                        //2. montrer popin
                        window.modalBootstrap('trigger_poppin', 'show');

                        //3. si valide le popin
                        $('.valider-popin').off('click').on('click', function PopinAjoutComposantIsvalidated(eventValidClick) {
                            console.log('valid');

                            eventValidClick.preventDefault();
                            eventValidClick.stopImmediatePropagation();
                            eventValidClick.stopPropagation();

                            var donnees = [];
                            var dataDate = $('#start').val();
                            var dataEleves = {};

                            $('.inp-cbx').each(function () {
                                dataEleves[$(this).attr('id')] = $(this).prop('checked');
                            });

                           console.log(dataEleves);
                           var dataElevesJson = JSON.stringify(dataEleves);
                           console.log(dataElevesJson);

                            $.post(path, {date: dataDate, eleves: dataEleves}, function(response) {
                                majList();
                                setTimeout(function(){
                                    initEdit();
                                }, 1000);
                                // cacher le poppin
                                window.modalBootstrap('trigger_poppin', 'hide');
                            }, 'JSON');
                        });
                    });
                });

            function initEdit() {
                $('.boxCours')
                    .off('click')
                    .on('click', function ouvrirPopinCreatetComposant() { //APPEL OUVERTURE DU POP-IN

                        var path = $(this).attr('data-href'),
                            titre = "Présence en cours";

                        //1. renseigner popin avec contenu de $(this).attr('data-href')
                        $.get(path, function success(data) {
                            $('.modal .modal-body').html(data);
                            $('.modal .modal-title').html(titre);

                            //2. montrer popin
                            window.modalBootstrap('trigger_poppin', 'show');

                            //3. si valide le popin
                            $('.valider-popin').off('click').on('click', function PopinAjoutComposantIsvalidated(eventValidClick) {
                                console.log('valid');

                                eventValidClick.preventDefault();
                                eventValidClick.stopImmediatePropagation();
                                eventValidClick.stopPropagation();

                                var donnees = [];
                                var dataDate = $('#start').val();
                                var signature = $('#signature').prop('checked');
                                var dataEleves = {};

                                $('.presence.inp-cbx').each(function () {
                                    dataEleves[$(this).attr('id')] = $(this).prop('checked');
                                });

                                console.log(dataEleves);
                                var dataElevesJson = JSON.stringify(dataEleves);
                                console.log(dataElevesJson);

                                $.post(path, {date: dataDate, eleves: dataEleves, signature: signature}, function (response) {
                                    majList();
                                    setTimeout(function(){
                                        initEdit();
                                    }, 1000);
                                    // cacher le poppin
                                    window.modalBootstrap('trigger_poppin', 'hide');
                                }, 'JSON');
                            });
                        });
                    });

                $('.deleteCours')
                    .off('click')
                    .on('click', function ouvrirPopinCreatetComposant(eventValidClick) { //APPEL OUVERTURE DU POP-IN

                        eventValidClick.preventDefault();
                        eventValidClick.stopImmediatePropagation();
                        eventValidClick.stopPropagation();

                        if (window.confirm("Etes-vous sûr(e) de supprimer ce cours ?")) {
                            var path = deletehref.replace('__coursid__', $(this).closest('.boxCours').attr('data-id')),
                                titre = "Présence en cours";

                            $.post(path, function (response) {
                                majList();
                                setTimeout(function(){
                                    initEdit();
                                }, 1000);
                            }, 'JSON');
                        }
                    });
            }
            initEdit();

            function majList() {
                $.post(indexhref, function (response) {
                    $('#bodybox').html(response);
                });
            }
        })
    </script>
{% endblock %}