{% extends base_template %}

{% block show %}

    <page size="A4" layout="landscape">
        <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">
                                <div class="row">
                                    <div class="col-md-4" style="width: 33%!important; float: left;">
                                        <div class=" text-center btn-block" style="width: 200px; margin: 0 auto;">
                                            {% if config.image %}
                                                <img style="max-width: 150px;" src="{{vich_uploader_asset(config,'imageFile')}}" alt="image {{ config.name }}" >
                                            {% else %}
                                                <img style="max-width: 150px;" src="{{ asset('images/logo.png') }}" alt="image {{ config.name }}" >
                                            {% endif %}
                                        </div>

                                    </div>
                                    <div class="col-md-4" style="width: 33%!important; float: left;">
                                        <h2 class="box-title text-center btn-block" style="margin-top: 20px;">
                                            {{"admin.classe.Emploi_du_temps"|trans}} {% if classe.nomFr is defined %} <br> {{ classe.nomFr }} {% endif %}
                                        </h2>
                                    </div>
                                    <div class="col-md-4" style="width: 33%!important; float: left;">
                                        <h2 class="box-title text-center btn-block" style="margin-top: 20px;">
                                            {{"menu.Annee_scolaire"|trans}} {% if classe.anneeScolaire is defined %} <br>
                                                {{ classe.anneeScolaire.nom }} {% endif %}
                                        </h2>
                                    </div>
                                </div>
                            </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 class="col-md-12">
                <div class="print" style="text-align: center;">
                    <button onclick="window.print()">{{"imprimer"|trans}}</button>
                </div>
            </div>
        </div>
    </page>
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        select , input{
            padding: 3px;
        }
        #calendar-holder{
            height: 530px;
        }


        .fc-scrollgrid , .fc-view  {width: 28cm!important; margin: 0 auto;}

        @media print {
            .box.box-primary{
                border: 2px solid #3c8dbc;
            }
            @page {
                size: landscape;
                margin: 0;
            }
            page[size="A4"][layout="landscape"] {
                width: 29cm;
                height: 21cm;
            }
            img{max-width: 4cm;}

            button{display: none!important;}

            td:first-child { text-align: left ;}

            .fc-header-toolbar{display: none!important;}
            .main-footer{display: none!important;}

            .fc .fc-timegrid-slot-minor {
                border-top-style: hidden;
            }
            .fc-media-screen .fc-timegrid-event{
                background-color: #ffffff !important;
                -webkit-print-color-adjust: exact;
                color: black;
                border-radius: unset;
            }
        }
    </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',
                weekends : true,
                slotMinTime:'08:00:00',
                slotMaxTime:'18:00:00',
                allDaySlot: false,
                initialView: 'timeGridWeek',
                views: {
                    timeGridWeek: {
                        weekday: 'long',
                        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: 'timeGridWeek,timeGridDay,dayGridMonth'
                },
                // 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({
                                id: '{% if classe.id is defined %} {{ classe.id }} {% else %}0{% endif %}' ,
                                type : 'seance', pour_eleve : {{ app.user.id }} ,
                                groupe : '{% if groupe.id is defined %}{{ groupe.id }}{% endif %}'
                            } )
                        },
                        // success: (data) => {
                          // console.log(data);
                        // },
                        failure: () => {
                            alert("aucune séance à afficher!");
                        },
                    },
                ],
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                },
                timeFormat: 'H(:mm)',
                selectHelper: true,
                selectable: true,
                snapDuration: '00:15:00',
                height: 530,

                {% 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 %}

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