{% extends "::layout.html.twig" %}

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

{% block title %}
   {{ parent() }} - Espace {{ espace }} {{ app.user.username }} 
{% endblock %}

{% block espace %}Espace {{ espace }} - {{ nom }}{% endblock %}

{% block jumbotron %}
    {% if espace == "Etudiant" %}
    <div class="page-header">
        <h2>{{ 'enseignant.title'|trans }}</h2>
    </div>
    {% endif %}
{% endblock %}

{% block body %}
    {% block alert %}
    {% endblock %}

    {% include '@FullCalendar/Calendar/calendar.html.twig' %}
    {% block modal %}
    {% endblock %}

    <div id="legende" style="columns: 3 100px; -webkit-columns: 3; -moz-columns: 3;">
        {% for theme in themes %}
            <div>
                <div class="carre event-theme-{{theme.themeCss}}"></div>
                <div class="description-legende">{{theme.libelle}}</div>
            </div>
        {% endfor %}
        {% if espace == "Enseignant" %}
            <div>
                <div class="carre event-non-valide"></div>
                <div class="description-legende">Evènement non validé</div>
            </div>
        {% endif %}
    </div>

{% endblock %}


{% block javascripts %}
    {{ parent() }}
    {#
    'bundles/eclconferences/js/fullcalendar2_4.js'
    'bundles/fullcalendar/js/fullcalendar/lib/moment.min.js'
    'bundles/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js'
    #}
    {% javascripts
        '@ECLConferencesBundle/Resources/public/js/fullcalendar2_4.js'
        '@FullCalendarBundle/Resources/public/js/fullcalendar/lib/moment.min.js'
     %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            moment().format();


            {# Charge les événements #}

            $('#calendar-holder').fullCalendar('removeEvents');  //Removes all event sources
            $('#calendar-holder').fullCalendar('removeEventSources');  //Removes all event sources
            evts = [];
            var event;

            {% for event in events %}
                event = {
                    id:"{{ event.uid }}",
                    title:"{{ event.title|escape('js') }}",
                    start:"{{ event.startDate|date('Y-m-d\\TH:i:s') }}",
                    end:"{{ event.endDate|date('Y-m-d\\TH:i:s') }}",
                    description:"{{ event.description|escape('js') }}",
                    intervenant:"{{ event.intervenant }}",
                    theme:"{% if event.theme %}{{ event.theme.themeCss }}{% endif %}",
                    valide:"{{ event.valide }}"
                };
                console.log(event);
                evts.push(event);
            {% endfor %}

            {# Configuration du calendrier fullCalendar #}



            $('#calendar-holder').fullCalendar({
                timezone: ('Europe/Paris'),
                businessHours: {            // n'affiche le calendrier que entre 8h et 21h et du lundi au vendredi dans la vue "semaine"
                    start: '08:00',
                    end: '21:00',
                    dow: [1, 2, 3, 4, 5]
                },
                hiddenDays: [6, 0],         // cache le samedi et le dimanche dans la vue "mois"
                contentHeight: 593,         // taille du conteneur du calendrier
                minTime: "08:00:00",
                maxTime: "21:00:00",
                allDaySlot: false,          // n'affiche pas dans une fenêtre les événements qui durent toute la journée
                defaultView: 'month',  // affiche par défault la fenêtre semaine
                lazyFetching: true,
                firstDay: 1,                // marque le lundi comme le premier jour de la semaine
                selectable: true,           // donne la possibilité de sélectionner des plages horaire

                {% if app.request.locale == 'fr' %} // si le site est en français charge la traduction française
                    customButtons: {        // déclare les boutons
                        listEvtButton: {
                            text: 'Liste des conférences', // nom du bouton
                        },
                        {% if espace == 'Enseignant' %}
                        presentielButton: {
                            text: 'Présentiel', // nom du bouton
                            click: function() {
                                //window.location.href='https://presentiel.ec-lyon.fr/';
                                window.open('https://presentiel.ec-lyon.fr/', '_blank');
                            }
                        },         
                      
                        {% endif %}
                    },
                    buttonText: {           // liste des boutons permettant de changer de vue
                        today:    'Aujourd\'hui',
                        month:    'Mois',
                        week:     'Semaine',
                        day:      'Jour'
                    },
                    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    dayNamesShort: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    monthNamesShort: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
                    axisFormat: 'H[h]',     // affiche l'heure sur le côté gauche du calendrier pour les vues "semaine" et "jour"
                    titleFormat: {
                        month: 'MMMM YYYY',
                        week: "[Semaine ] W",
                        day: 'dddd D MMMM',
                        '': ''
                    },
                    timeFormat: {
                        month: 'H[h]mm',
                        agenda: 'H[h]mm',
                        '': 'H[h]mm'
                    },
                    columnFormat:{
                        month: 'ddd',
                        week: 'dddd D MMM',
                        agendaDay: ' '
                    },
                {% elseif app.request.locale == 'en' %} // si le site est en anglais charge la traduction anglaise
                    customButtons: {
                        listEvtButton: {
                            text: 'Conference list',
                        },
                        {% if espace == 'Enseignant' %}
                        zimbraButton: {
                             text: 'Calendrier Zimbra', // nom du bouton
                             click: function() {
                                window.location.href='https://messagerie.ec-lyon.fr/zimbra/mail#2';
                            }
                        },
                      presentielButton: {
                            text: 'Présentiel', // nom du bouton
                            click: function() {
                                window.location.href='https://presentiel.ec-lyon.fr/';
                            }
                        },
                       

                        {% endif %}
                    },
                    buttonText: {
                        today:    'Today',
                        month:    'Month',
                        week:     'Week',
                        day:      'Day'
                    },
                    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    monthNamesShort: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    axisFormat: 'h(:mm)t',
                    titleFormat: {
                        month: 'MMMM YYYY',
                        week: "[Week ] W",
                        day: 'MMMM D YYYY',
                        '': ''
                    },
                    timeFormat: {
                        agenda: 'h:mm',
                        '': 'h(:mm)t'
                    },
                    columnFormat:{
                        month: 'ddd',
                        week: 'ddd M/D',
                        agendaDay: 'dddd'
                    },
                {% endif %}

                header: { // affiche les boutons
                    left: 'listEvtButton{% if espace == 'Enseignant' %}, zimbraButton presentielButton {% endif %}',
                    center: 'prev, title, next',
                    right: 'month, agendaWeek, agendaDay'
                },
                // si un événement est cliqué
                eventClick: function(event, jsEvent, view) {
                    {# TOMODIF #}
                    {% if espace == 'Enseignant' %}
                        // si on est dans un espace enseignant, envoi une requête ajax qui appelle le controlleur editAction
                        $.ajax({
                            type: 'GET',
                            url: Routing.generate('ecl_conferences_edit', {'_locale': locale, 'uid' : event.id, 'list': 0}), // url généré grâce au bundle FOSJsRoutingBundle

                            success: function() {
                                console.log("Ajax request was successfully sent");
                            },
                            error: function() {
                                alert("Une erreur technique est survenue. Si le problème persiste, veuillez contacter l\'administrateur.");
                            },
                            complete: function(response, status) { // récupère le code html renvoyé par le controlleur
                                $("#modal-container").html(response.responseText); // pour l'insérer dans notre conteneur de modal
                                $("#modal-container").modal('show'); // et affiche la modale
                            },
                        });
                    {% else %}
                        // si on est dans un espace etudiant, envoi une requête ajax qui appelle le controlleur tAction
                        $.ajax({
                            type: 'GET',
                            url: Routing.generate('ecl_conferences_register', {'_locale': locale, 'uid' : event.id, 'list': 0}),

                            success: function() {
                                console.log("Ajax request was successfully sent");
                            },
                            error: function() {
                                alert("Une erreur technique est survenue. Si le problème persiste, veuillez contacter l\'administrateur.");
                            },
                            complete: function(response, status) {
                                $("#modal-container").html(response.responseText);
                                $("#modal-container").modal('show');
                            },
                        });
                    {% endif %}
                },
                eventMouseover: function(event) {
                    $(this).css('cursor', 'pointer');
                    //$(this).css('opacity', '0.7');
                }, 
                /*
                eventMouseout: function(event) {
                    $(this).css('opacity', '0.8');
                },*/
                events: evts,
                eventRender: function(event, element) {
                    if(event.theme == "a")
                        element.find('.fc-content').parent().addClass('event-theme-a');
                    else if(event.theme == "b")
                        element.find('.fc-content').parent().addClass('event-theme-b');
                    else if(event.theme == "c")
                        element.find('.fc-content').parent().addClass('event-theme-c');
                    else if(event.theme == "d")
                        element.find('.fc-content').parent().addClass('event-theme-d');
                    else if(event.theme == "e")
                        element.find('.fc-content').parent().addClass('event-theme-e');
                    else if(event.theme == "f")
                        element.find('.fc-content').parent().addClass('event-theme-f');
                    else if(event.theme == "g")
                        element.find('.fc-content').parent().addClass('event-theme-g');
                     else if(event.theme == "h")
                        element.find('.fc-content').parent().addClass('event-theme-h');
                    else
                        element.find('.fc-content').parent().addClass('event-non-valide');

                    if(event.valide == 1)
                        element.find('.fc-title').append("<br/><div class='event-info description_ellipsis' >par <strong>" + event.intervenant + "</strong></div>");
                        /*element.find('.fc-title').append("<br/><div class='event-info' >par <strong>" + event.intervenant + "</strong></div><div class='description_ellipsis'>" + event.description +"</div>");*/
                    else
                        element.find('.fc-title').append("<br/>");
                    /*
                     * Suppression qTip
                    element.qtip({
                        content: event.description,
                        style: {
                            tip: {
                                background: 'black',
                                color: '#FFFFFF'
                            }

                        },
                        position: {
                            corner: {
                                target: 'center',
                                tooltip: 'bottomMiddle'
                            }
                        }
                    });
                    */
                }
            });


            $('.fc-listEvtButton-button').click(function() {
                {# TOMODIF #}
                {% if espace == 'Enseignant' %}
                    $.ajax({
                        type: 'GET',
                        url: Routing.generate('ecl_conferences_enseignant_list', {'_locale': locale}),

                        success: function() {
                            console.log("Ajax request was successfully sent");
                        },
                        error: function() {
                            alert("Une erreur technique est survenue. Si le problème persiste, veuillez contacter l\'administrateur.");
                        },
                        complete: function(response, status) {
                            $("#modal-container").html(response.responseText);
                            $("#modal-container").modal('show');
                        },
                    });
                {% else %}
                    $.ajax({
                        type: 'GET',
                        url: Routing.generate('ecl_conferences_etudiant_list', {'_locale': locale}),

                        success: function() {
                            console.log("Ajax request was successfully sent");
                        },
                        error: function() {
                            alert("Une erreur technique est survenue. Si le problème persiste, veuillez contacter l\'administrateur.");
                        },
                        complete: function(response, status) {
                            $("#modal-container").html(response.responseText);
                            $("#modal-container").modal('show');
                        },
                    });
                {% endif %}
            });



        });
    </script>

{% endblock %}