{% extends base_template %}

{% block show %}
    {% set exist = true %}
{#    {% if app.user and is_granted('ROLE_ENSEIGNANT')  %}#}
{#        {% for enseignantClasses in  app.user.enseignantClasses   %}#}
{#            {% if (enseignantClasses.classe.id == classe.id) %}#}
{#                {% set exist = true %}#}
{#            {% endif %}#}
{#        {% endfor %}#}
{#    {% endif %}#}
{#    {% if app.user and is_granted('ROLE_ELEVE')  %}#}
{#        {% for eleve in  app.user.eleveAnneeScolaires   %}#}
{#            {% if (eleve.classe.id == classe.id) %}#}
{#                {% set exist = true %}#}
{#            {% endif %}#}
{#        {% endfor %}#}
{#    {% endif %}#}
{#    {% if app.user and is_granted('ROLE_ADMIN')  %}#}
{#        {% set exist = true %}#}
{#    {% endif %}#}
{#    {% if app.user and is_granted('ROLE_PARENT')  %}#}
{#        {% set exist = true %}#}
{#    {% endif %}#}
    {% if exist %}
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h2 class="box-title text-center btn-block">
                                {{ "menu.Calendrier_des_repas"|trans }}
                            </h2>
                        </div>
                        <div class="box-body">
                            <div class="sonata-ba-collapsed-fields">

                                <div class="col-md-12">
                                    <div id="calendar-holder"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        {% if app.user and is_granted('ROLE_ADMIN')  %}
        <div class="modal fade" id="appelle-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{{ "admin.service.fermer"|trans }}</span></button>
                        <h4 class="modal-title">{{ "admin.service.feilapp"|trans }}</h4>
                    </div>

                    <form method="post" >
                        <div class="modal-body">
                            <input type="hidden" name="id_repas" id="id_repas" >
                            <input type="hidden" class="form-control" id="date_seance" name="date_seance">
                            <div class="col-md-12">
                                <h2 style="margin: 0;" class="text-center" id="date_seance_text"></h2>
                            </div>
                            <div class="col-md-12">
                                <h3 class="text-center" id="seance_text"></h3>
                            </div>

                            <table class="table table-bordered table-sm " id="tbl-eleve">
                                <thead class="thead-dark">
                                <tr class="bg-primary">
                                    <th style="text-align: left" scope="col">{{ "admin.anneescolaire.nom"|trans }}</th>
                                    <th scope="col">{{ "admin.service.present"|trans }}</th>
                                    <th scope="col">{{ "admin.service.absent"|trans }}</th>
                                    <th scope="col">{{ "admin.service.elevetatacces"|trans }}</th>
                                </tr>

                                </thead>
                                <tbody id="list-attendance">
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <div class="col-md-12">
                                <button name="feuille_appelle" type="button" class="btn btn-default" data-dismiss="modal">{{ "admin.service.fermer"|trans }}</button>
                                <button type="submit" class="btn btn-primary">{{ "admin.service.enregistrer"|trans }}</button>
                            </div>
                        </div>
                    </form>

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

    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                    {{ "admin.cours.404"|trans }}
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        select , input{
            padding: 3px;
        }
    </style>
{% endblock %}
{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar-holder');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                timeZone: 'UTC',
                slotMinTime:'08:00:00',
                slotMaxTime:'18:00:00',
                allDaySlot: false,
                initialView: 'dayGridMonth',
                views: {
                    timeGridWeek: {
                        slotLabelFormat: ['H:mm'],
                    },
                },
                {% if app.request.locale == 'ar_Tn' %}
                locale: 'ar-tn',
                {% elseif app.request.locale == 'en' %}
                locale: 'en',
                {% elseif app.request.locale == 'fr' %}
                locale: 'fr',
                {% else %}
                locale: '{{ default_locale }}',
                {% endif %}

                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                // headerToolbar: {
                //     left: false,
                //     center: false,
                //     right: false
                // },
                buttonIcons: false, // show the prev/next text
                weekNumbers: false,
                navLinks: false, // can click day/week names to navigate views
                editable: false,
                dayMaxEvents: false, // allow "more" link when too many events

                eventSources: [
                    {
                        url: "{{ path('fc_load_events') }}",
                        method: "POST",
                        extraParams: {
                            filters: JSON.stringify({type : 'repas'})
                        },
                        // success: (data) => {
                          // console.log(data);
                        // },
                        failure: () => {
                            alert("{{ "admin.service.norepas"|trans }}");
                        },
                    },
                ],
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                },
                selectable: true,
                snapDuration: '00:15:00',

                height: 530,
                // configurable hiddenDays & firstDay,
                {% if config.firstDay is defined %}
                    firstDay: {{ config.firstDay ? config.firstDay : 0 }},
                {% endif %}
                {% if config.hiddenDays|length %}
                hiddenDays: [
                    {% for day in config.hiddenDays %}
                    {{ day }},
                    {% endfor %}
                ],
                {% endif %}
                eventLimit: true, // allow "more" link when too many events
                eventLimitText: "More", //sets the text for more events
                {% if app.user and is_granted('ROLE_ADMIN')  %}
                eventClick: function(info) {
                    let succuss = false;
                    console.log(info.event.id);
                    // info.el.style.borderColor = 'red';
                    $('#appelle-modal').find('input[id=id_repas]').val(
                        info.event.id
                    );
                    $('#appelle-modal').find('input[id=date_seance]').val(
                        calendar.formatDate(info.event.start, 'YYYY-MM-DD')
                    );
                    // console.log(info.event);
                    $('#date_seance_text').html(calendar.formatDate(info.event.start, 'DD/MM/YYYY'))
                    $('#seance_text').html(info.event.title)
                    // $('#appelle-modal').find('input[id=date_seance]').attr('disabled',true)
                    let datarr = {};
                    datarr['repas'] = info.event.id;
                    $.post('{{path('getCantineEleveByRepasAjax')}}', datarr).then(function (data) {
                        $('#tbl-eleve > tbody#list-attendance').html('');
                        console.log(data);
                        if (Object.keys(data).length !== 0){
                            succuss = true;
                            $.each(data, function(id,value) {
                                let nom = '';
                                let remarque = '';
                                let present = '';
                                let absent = '';
                                $.each(value, function(key,datat) {
                                    if (key === 'remarque'){
                                        if (data == null){
                                            remarque = '';
                                        }

                                        else
                                            remarque = datat;
                                    }
                                    if (key === 'nom'){
                                        nom = datat;
                                    }
                                    if (key === 'type'){
                                        if (datat === 'absent'){
                                            absent = 'checked'
                                        }
                                        else {
                                            present = 'checked'
                                        }
                                    }
                                });
                                let trcontent = "" +
                                    "<tr data-id-eleve=\""+id+"\" class=\"sonata-collection-row\">" +
                                    "    <td>"+nom+"</td>" +
                                    "    <td>" +
                                    "        <div class=\"form-check \">" +
                                    "            <input "+present+" class=\"form-check-input attendance_type_present_js\" type=\"radio\" name=\"attendance["+id+"][type]\" value=\"present\">" +
                                    "        </div>" +
                                    "    </td>" +
                                    "    <td>" +
                                    "        <div class=\"form-check \">" +
                                    "            <input "+absent+" class=\"form-check-input attendance_type_absent_js\" type=\"radio\" name=\"attendance["+id+"][type]\" value=\"absent\">" +
                                    "        </div>" +
                                    "    </td>" +
                                    "    <td>" +
                                    "        <div class=\"form-group\">" +
                                    "            <input class=\"attendance_remarque_js\" style=\"min-width: 100px;\" type=\"text\" value=\""+remarque+"\" name=\"attendance["+id+"][remarque]\">" +
                                    "        </div>" +
                                    "    </td>" +
                                    "</tr>";
                                $('#tbl-eleve > tbody#list-attendance').append(trcontent);
                            });
                        }
                        else {
                            $.post('{{path('getEleveAnneeRestaurantAjax')}}', datarr).then(function (data) {
                                console.log(data);
                                if (Object.keys(data).length !== 0){
                                    succuss = true;
                                    $('#tbl-eleve > tbody#list-attendance')
                                    $.each(data, function(id,value) {
                                        let nom = '';
                                        let etat = '';

                                        $.each(value, function(key,datat) {

                                            if (key === 'nom'){
                                                nom = datat;
                                            }
                                            if (key === 'etat'){
                                                etat = datat;
                                            }
                                        });
                                        let trcontent = "" +
                                            "<tr data-id-eleve=\""+id+"\" class=\"sonata-collection-row\">" +
                                            "    <td>"+nom+" ("+etat+") </td>" +
                                            "    <td>" +
                                            "        <div class=\"form-check \">" +
                                            "            <input checked class=\"form-check-input attendance_type_present_js\" type=\"radio\" name=\"attendance["+id+"][type]\" value=\"present\">" +
                                            "        </div>" +
                                            "    </td>" +
                                            "    <td>" +
                                            "        <div class=\"form-check \">" +
                                            "            <input class=\"form-check-input attendance_type_absent_js\" type=\"radio\" name=\"attendance["+id+"][type]\" value=\"absent\">" +
                                            "        </div>" +
                                            "    </td>" +
                                            "    <td>" +
                                            "        <div class=\"form-group\">" +
                                            "            <input class=\"attendance_remarque_js\" style=\"min-width: 100px;\" type=\"text\" name=\"attendance["+id+"][remarque]\">" +
                                            "        </div>" +
                                            "    </td>" +
                                            "</tr>";
                                        $('#tbl-eleve > tbody#list-attendance').append(trcontent)

                                    });
                                }

                            });

                        }
                    })
                    // show modal dialog
                    $('#appelle-modal').modal('show');
                },
                {% endif %}
                {#select: function( info ) {#}
                {#    const date = moment(calendar.formatDate( info.start,'YYYY-MM-DD' ));#}
                {#    const dow = date.day();#}
                {#    // console.log(dow);#}
                {#    // console.log(calendar.formatDate( info.start ,'YYYY-MM-DD'))#}
                {#    $('#event-modal').find('select[id=seance_jour]').val(#}
                {#        dow#}
                {#    );#}
                {#    $('select.classe-js').val({{ classe.id }}).trigger('change');#}
                {#    $('#event-modal').find('input[id=seance_heureDebut]').val(#}
                {#        calendar.formatDate(info.start, 'HH:mm')#}
                {#    );#}
                {#    $('#event-modal').find('input[id=seance_heureFin]').val(#}
                {#        calendar.formatDate(info.end, 'HH:mm')#}
                {#    );#}
                {#    // show modal dialog#}
                {#    $('#event-modal').modal('show');#}

                {#},#}

            });
            calendar.render();
        });
    </script>
{% endblock %}