{% extends base_template %}

{% 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;}
          a[href]:after {
              content: 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">
      $('.fc-event').attr('style', 'font-size: 1.85em !important');
      document.addEventListener('DOMContentLoaded', function () {
          var calendarEl = document.getElementById('calendar-holder');
          let dolink = 0;
        {% if app.user and (is_granted('ROLE_ENSEIGNANT') or is_granted('ROLE_ADMIN')) %}
          dolink = 1;
        {% endif %}
          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'],
                  },
              },
              // 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

              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) {
              //     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: dolink})
                      },
                      failure: () => {
                          alert("aucune devoir a afficher!");
                      },
                  },
              ],
          });
          calendar.render();
      });
  </script>
{% endblock %}
{% block show %}
  {% set exist = false %}
  {% 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 %}
    <page size="A4" layout="landscape">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-primary">
            <div class="">
              <h3 class="box-title text-center">
                {{ 'admin.classe.les_examens_pour_classe'|trans }}: {{ classe.nomFr }}
              </h3>
            </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 class="col-md-12">
          <div class="print" style="text-align: center;">
            <button onclick="window.print()">{{ "imprimer"|trans }}</button>
          </div>
        </div>
      </div>
    </page>
  {% 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">
                  Vous avez pas le droit d'accedez à cette page
                </h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}


{% endblock %}