{% extends "frontoffice/layout.html.twig" %}

{% block page_title %}{{ site_titre }} - Évaluation d'un étudiant{% endblock %}

{% block stylesheets %}
<style>
    ul#dev-sessions li.disabled {
        opacity: 0.5;
    }

    .modal {
        font-size: 1.7rem;
    }
    .modal .modal-dialog {
        max-width: 800px;
    }
    .modal .modal-title {
        font-size: 2rem;
    }
    .modal .form-control {
        font-size: 1.7rem;
    }
    #modal_ues {
        height: 18rem;
    }
    hr {
        margin: 2rem 0;
    }
    label.vert {
        color: #36B6A1;
        font-weight: bold;
    }

    .mCustomScrollbar.content ul li.full-width {
        margin: 0;
        padding: 0;
    }
    #create-session, #add-ue-session {
        font-size: 2rem;
        color: white;
        background-color: #136967;
        width: 100%;
        padding: 1rem;
        margin: 0 0 0.7rem;
    }
</style>
{% endblock %}

{% block main_class %}main-page{% endblock %}

{% block content %}

    <div class="main-header">
        <h2>SÉLECTION PROMOTION / SESSION / UNITÉ D’ENSEIGNEMENT</h2>
    </div>

    <div class="row d-block d-sm-flex mb-md-5">
        <div class="col">
            <h3>Sélectionner <br>une promotion</h3>
            <div class="content mCustomScrollbar content-mr" data-mcs-theme="rounded-dark">
                <ul id="dev-promos">
                    {% for promo in promos %}
                        <li data-id="{{ promo.id }}">{{ promo.libelle }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="col" id="col_sessions">
            <h3>Sélectionner <br>une date de session</h3>
            <div class="content mCustomScrollbar content-mr" data-mcs-theme="rounded-dark">
                <ul id="dev-sessions">
                    {# ! rempli automatiquement en JS #}
                </ul>
            </div>
        </div>
        <div class="col" id="col_ues">
            <h3>Sélectionner <br>une Unité d'enseignement</h3>
            <div class="content mCustomScrollbar" data-mcs-theme="rounded-dark">
                <ul id="dev-ues">
                    {# ! rempli automatiquement en JS #}
                </ul>
            </div>
        </div>
    </div>

    <div class="btn-group justify-content-center" role="group" aria-label="">
        <button id="dev-submit" class="btn btn-valider" type="button">Valider</button>
    </div>


    {# MODAL NEW SESSION A LA VOLEE #}
    <div id="modal-new-session" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Créer une session</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form action="{{ path('enseignant_create_new_session') }}" method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="vert">Promotion</label>
                        <select id="modal_promo" name="promotion" class="form-control">
                            <option value=""></option>
                        </select>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="vert">Date</label>
                        <p>{{ "now"|date('d/m/Y') }}</p>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="vert">Travail de groupe</label>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="travail_groupe" id="modal_travail-groupe1" value="1"></input>
                            <label class="form-check-label" for="modal_travail-groupe1">oui</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="travail_groupe" id="modal_travail-groupe0" value="0" checked></input>
                            <label class="form-check-label" for="modal_travail-groupe0">non</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Créer</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    {# MODAL AJOUT D'UE A UNE SESSION #}
    <div id="modal-add-ue-session" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter des UEs à la session</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ path('enseignant_add_session_ue') }}" method="POST">
                <div class="modal-body">
                    <input type="hidden" id="modal_session_eval" name="session_eval" value="" />

                    <div class="form-group">
                        <label class="vert">Unités d'enseignement</label>
                        <select id="modal_ues" name="ues[]" class="form-control" multiple>
                            {# <option value="">-- sélectionnez la ou les UE de la session --</option> #}
                            {% for promo in promos %}
                                <optgroup id="{{ promo.id }}" label="{{ promo.libelle }}">
                                    {% for ue in promo.unitesEnseignement %}
                                        <option value="{{ ue.id }}">{{ ue.code ~ ' - ' ~ ue.libelle }}</option>
                                    {% endfor %}
                                </optgroup>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" integrity="sha512-/n/dTQBO8lHzqqgAQvy0ukBQ0qLmGzxKhn8xKrz4cn7XJkZzy+fAtzjnOQd5w55h4k1kUC+8oIe6WmrGUYwODA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

    var url_get_sessions = "{{ path('promo_get_sessions', {'id': 'id'}) }}";
    var url_get_ues      = "{{ path('session_get_ues', {'id': 'id'}) }}";

    var url_enseignant_select_etudiant = "{{ path('enseignant_select_etudiant', {'promotion': '_promotion_', 'session': '_session_', 'id_ues': '_ue_'}) }}";

    $(document).ready(function() {
        $('ul#dev-promos, ul#dev-sessions').on('click', 'li', function() {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
        });


        $('ul#dev-ues').on('click', 'li', function() {
            $(this).toggleClass('active');

            var $selected = $(this).find('input[name="ues[]"]');
            $selected.prop('checked', !$selected.is(':checked'));
        });

        $('ul#dev-promos').on('click', 'li', function() {
            var id_promo = $(this).data('id');

            $.ajax({
                url: url_get_sessions.replace('id', id_promo),
                type: 'GET',
                success: function (result) {
                    var $sessions = '';

                    if (result.length) {
                        result.forEach(session_eval => {

                            var li_class = 'disabled';
                            if (Date.equals(Date.today(), Date.parse(session_eval.date))) {
                                li_class = "";
                            }

                            var $session = '<li class="' + li_class + '" data-id="'+ session_eval.id+'">' + Date.parse(session_eval.date).toString("dd/MM/yyyy");
                            if (session_eval.travail_groupe) {
                                $session = $session + '<br><small>(Travail de groupe)</small>';
                            }
                            $session = $session + '</li>';

                            $sessions = $sessions + $session;
                        });
                    }

                    // on ajoute un bouton pour créer une nouvelle session
                    $sessions = '<li class="full-width"><button type="button" id="create-session" data-bs-toggle="modal" data-bs-target="#modal-new-session">Créer une session</button></li>' + $sessions;

                    $('ul#dev-sessions').html($sessions);
                    $('ul#dev-ues').html('');
                },
                error: function (result) {
                    console.log(result);
                }
            });
        });

        $('ul#dev-sessions').on('click', 'li', function() {
            var id_session = $(this).data('id');
            if (id_session) {
                $.ajax({
                    url: url_get_ues.replace('id', id_session),
                    type: 'GET',
                    success: function (result) {
                        var $ues = '';

                        if (result.length) {
                            result.forEach(ue => {
                                $ues = $ues + '<li data-label="'+ ue.full_libelle +'"><span class="checkbox"><input type="checkbox" name="ues[]" value="' + ue.id + '"></span>' + ue.full_libelle + ' </li>';
                            });
                        }

                        // on ajoute un bouton pour créer une nouvelle session
                        $ues = '<li class="full-width"><button type="button" id="add-ue-session" data-bs-toggle="modal" data-bs-target="#modal-add-ue-session">Ajouter des UEs</button></li>' + $ues;

                        $('ul#dev-ues').html($ues);
                    },
                    error: function (result) {
                        console.log(result);
                    }
                });
            }
        });

        $('body').on('click', 'button#create-session', function() {
            var $selected_promo = $('ul#dev-promos li.active');
            $('#modal_promo option').val($selected_promo.data('id')).text($selected_promo.text());
        });

        $('body').on('click', 'button#add-ue-session', function() {
            var $selected_promo = $('ul#dev-promos li.active');
            var $selected_session = $('ul#dev-sessions li.active');
            $('#modal_session_eval').val($selected_session.data('id'));

            $('#modal_ues optgroup').hide();
            $('#modal_ues optgroup[id="' + $selected_promo.data('id') + '"]').show();
        });

        $('#dev-submit').click(function() {
            var $selected_promo   = $('ul#dev-promos li.active');
            var $selected_session = $('ul#dev-sessions li.active');
            var $selected_ue      = $('ul#dev-ues li.active');

            if ($selected_promo.length && $selected_session.length && $selected_ue.length) {

                var id_promo = $selected_promo.data('id');
                var id_session = $selected_session.data('id');

                {% if app.request.headers.get('host') is same as('apcido.cido.fr') %}

                    if ($selected_session.hasClass('disabled')) {
                        swal({
                            title: "Session non ouverte",
                            text: "Vous ne pouvez faire une évaluation que pour la session du jour, veuillez changer votre sélection.",
                            icon: "warning",
                        });
                    } else {

                        nextPage(id_promo, id_session);
                    }

                {% else %}

                        nextPage(id_promo, id_session);

                {% endif %}
            }
        });

        function nextPage(id_promo, id_session) {
            var $ids_ues = $('input[name="ues[]"]:checked').map(function(){ return $(this).val(); }).get();
            if ($ids_ues.length > 1) {
                var noms_selected_ues = $('input[name="ues[]"]:checked').map(function(){ return "\n" + $(this).parents('li').data('label'); }).get();
                swal({
                    title: "Plusieurs unités d'enseignement",
                    text: "Vous avez sélectionné plusieurs UEs :\n" + noms_selected_ues,
                    dangerMode: true,
                    icon: "warning",
                    buttons: {
                        cancel: "Annuler",
                        confirm: "Valider",
                    }
                })
                .then((willValidate) => {
                    if (willValidate) {
                        location.href = url_enseignant_select_etudiant.replace('_promotion_', id_promo).replace('_session_', id_session).replace('_ue_', $ids_ues);
                    }
                });
            } else {
                if ($ids_ues.length) {
                    location.href = url_enseignant_select_etudiant.replace('_promotion_', id_promo).replace('_session_', id_session).replace('_ue_', $ids_ues);
                }
            }
        }
    });
</script>
{% endblock %}