{% 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">
                <h4 class="box-title">
                  {#                                les examens #}
                </h4>
              </div>
              <div class="box-body">
                <div class="sonata-ba-collapsed-fields">

                  <div class="col-md-12">
                    <div id="calendar-holder"></div>

                    {#                                    {{ dump(classe) }} #}
                  </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>
      .fc-daygrid-event {
          font-size: var(--fc-small-font-size, .75em);
      }

      .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;
          }
          a[href]:after {
              content: none !important;
          }
      }
  </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, {
              initialView: 'dayGridMonth',
            {% 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 %}
              timeZone: 'UTC',
              slotMinTime: '08:00:00',
              slotMaxTime: '18:00:00',
              allDaySlot: false,
              height: 600,
              displayEventEnd: true,
              views: {
                  timeGridWeek: {
                      slotLabelFormat: ['H:mm'],
                  },
                  dayGridMonth: {
                      slotLabelFormat: ['H:mm'],
                  },
                  timeGridDay: {
                      slotLabelFormat: ['H:mm'],
                  },
                  listMonth: {
                      slotLabelFormat: ['H:mm'],
                  },
              },
            {% 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

              eventTimeFormat: {
                  hour: '2-digit',
                  minute: '2-digit',
                  hour12: false
              },
              headerToolbar: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
              },
              buttonIcons: false, // show the prev/next text
              weekNumbers: false,
              navLinks: true, // can click day/week names to navigate views
              editable: false,
              dayMaxEvents: true, // allow "more" link when too many events
              close: 'fa-times',
              prev: 'fa-chevron-left',
              next: 'fa-chevron-right',
              prevYear: 'fa-angle-double-left',
              nextYear: 'fa-angle-double-right',

              eventClick: function (info) {
                  $('.fc-daygrid-event').on('click', function (e) {
                      e.preventDefault();
                      $(this).css({'pointer-events': 'none'});
                  });
                  return null;
                  // alert('Event: ' + info.event.title);
                  // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
                  // alert('View: ' + info.view.type);
                  //
                  // // change the border color just for fun
                  // info.el.style.borderColor = 'red';
              },
              eventSources: [
                  {
                      url: "{{ path('fc_load_events') }}",
                      method: "POST",
                      extraParams: {
                          filters: JSON.stringify({
                              id: '{{ classe.id }}',
                              type: 'devoir', lien: 0,
                              pour_eleve: {{ app.user.id }} ,
                              groupe: '{% if groupe.id is defined %}{{ groupe.id }}{% endif %}'
                          })
                      },
                      failure: () => {
                          alert("aucune devoir a afficher!");
                      },
                  },
              ],
          });
          calendar.render();
      });
  </script>
{% endblock %}