{% extends base_template %}

{% 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="row">
            <div class="col-md-12">
              <div class="box box-primary landd">
                <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;">
                        {{ 'AnneeScolaire'|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>
    <div class="modal fade" id="event-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <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">{{ 'Fermer'|trans }}</span></button>
            <h4 class="modal-title">{{ 'admin.classe.Ajouter_une_seance'|trans }}</h4>
          </div>

          {{ form_start(form) }}


          <div class="modal-body">
            <div id="nomatiere-js" style="display: none">
              <center><h3>{{ 'admin.classe.Veuillez_mettre_jour_classe'|trans }}</h3></center>
            </div>

            <div class="row yesmatiere-js">
              <div class="form-group col-md-3">
                {{ form_row(form.matiere) }}
              </div>
              <div class="form-group col-md-3">
                {{ form_row(form.salleClasse) }}
              </div>
              <div class="form-group col-md-3">
                {{ form_row(form.parGroupe) }}
              </div>
              <div class="form-group col-md-3">
                {{ form_row(form.parQuinzaine) }}
              </div>
              <div class="form-group col-md-4">
                {{ form_row(form.jour) }}
              </div>
              <div class="form-group col-md-4">
                {{ form_row(form.heureDebut) }}
              </div>
              <div class="form-group col-md-4">
                {{ form_row(form.heureFin) }}
              </div>
              <div class="form-group col-md-6">
                <div id="enseignant"></div>
              </div>
              <div class="col-md-12">
                {{ form_row(form.classe) }}
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="col-md-12">
              <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Fermer'|trans }}</button>
              <button type="submit" class="btn btn-primary yesmatiere-js">{{ 'Enregistrer'|trans }}</button>
            </div>
          </div>
          {{ form_end(form) }}

        </div>
      </div>
    </div>

    <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">{{ 'Fermer'|trans }}</span></button>
            <h4 class="modal-title text-center" id="title-feuille-js"></h4>
          </div>

          <form method="post">
            <div class="modal-body">
              <input type="hidden" name="id_seance" id="id_seance">
              <input type="hidden" class="form-control" id="date_seance" name="date_seance">
              <div class="col-lg-4" style="margin-bottom: 20px;">
                <h4 style="margin: 0;" class="text-center" id="date_seance_text"></h4>
              </div>
              <div class="col-lg-4" style="margin-bottom: 20px;">
                <h4 style="margin: 0;" class="text-center" id="seance_text"></h4>
              </div>
              <div class="col-lg-4" style="margin-bottom: 20px;">
                <select name="gpClasses" id="gpClasses" data-sonata-select2="false">
                  <option value="0">{{ 'admin.classe.Selectionner_groupe'|trans }}</option>
                  {% for gpClasse in gpClasses %}
                    <option value="{{ gpClasse.id }}">{{ gpClasse.nomFr }}</option>
                  {% endfor %}
                </select>
                <h4 id="gpClassestext" style="display: none; margin: 0;"></h4>
              </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.classe.Nom_de_eleve'|trans }}</th>
                  <th scope="col">{{ 'Present'|trans }}</th>
                  <th scope="col">{{ 'Absent'|trans }}</th>
                  <th scope="col">{{ 'Remarque'|trans }}</th>
                </tr>

                </thead>
                <tbody id="list-attendance">
                </tbody>
              </table>
              <div style="color: red" id="err_message_supp"></div>
            </div>
            <div class="modal-footer">
              <div class="col-md-12">
                <button type="submit" class="btn btn-primary">{{ 'Enregistrer'|trans }}</button>
                <button name="feuille_appelle" type="button" class="btn btn-default"
                        data-dismiss="modal">{{ 'Fermer'|trans }}
                </button>
                <button type="button"
                        id="delete-btn-js"
                        class="btn btn-danger"
                    {#                                    style="display: none;" #}
                >{{ 'Supprimer'|trans }}
                </button>
              </div>
            </div>
          </form>

        </div>
      </div>
    </div>
  {% 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 %}
{% block stylesheets %}
  {{ parent() }}
  <style>
      #calendar-holder {
          height: 530px;
      {% if  is_granted('ROLE_PARENT') %} pointer-events: none;
      {% endif %}
      }

      .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 () {
          $('select.classe-js').val({{ classe.id }}).trigger('change');
          var calendarEl = document.getElementById('calendar-holder');
          $('select.mymatiere-js option').remove();
          let datar = {};
          datar['classe'] = {{ classe.id }};

          $('.timepicker').timepicker({
              timeFormat: 'HH:mm',
              interval: 15,
              minTime: '08:00',
              maxTime: '18:00',
              startTime: '08:00',
              dynamic: false,
              dropdown: true,
              scrollbar: true
          });


          $.post('{{ path('getMatiereByClasseAjax') }}', datar).then(function (data) {

              var $el = $("select.mymatiere-js");
              $.each(data, function (key, value) {
                  $el.append($("<option></option>").attr("value", value).text(key));
              });
              if (data.length === 0) {

                  $("#nomatiere-js").show();
                  $(".yesmatiere-js").hide();
              }
              $el.trigger('change');
          })


          var calendar = new FullCalendar.Calendar(calendarEl, {
              timeZone: 'UTC',
              slotMinTime: '08:00:00',
              slotMaxTime: '18:00:00',
              allDaySlot: false,
              initialView: 'timeGridWeek',
              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: 'timeGridWeek,timeGridDay,dayGridMonth'
                  right: 'timeGridWeek,timeGridDay'
              },
              // 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: '{{ classe.id }}', type: 'seance'})
                      },
                      // success: (data) => {
                      // console.log(data);
                      // },
                      failure: () => {
                          alert("aucune séance à afficher!");
                      },
                  },
              ],
              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
              eventClick: function (info) {
                  $('h4#gpClassestext').hide();
                  $('h4#title-feuille-js').html("{{ 'admin.classe.Nouvelle_feuille_appel'|trans }}");
                  $('select#gpClasses').show();
                  $('select#gpClasses').val(0);
                  $('h4#gpClassestext').hide();
                  let succuss = false;
                  let nvpargroup = false;
                  // info.el.style.borderColor = 'red';
                  $('#appelle-modal').find('input[id=id_seance]').val(
                      info.event.id
                  );

                  $('#appelle-modal').find('input[id=date_seance]').val(
                      calendar.formatDate(info.event.start, 'YYYY-MM-DD')
                  );
                  $('#date_seance_text').html(calendar.formatDate(info.event.start, 'DD/MM/YYYY'));
                  $('#seance_text').html(info.event.title.replace('/ par groupe', ''));
                  console.log(info.event.extendedProps.parGroupe);
                  // $('#appelle-modal').find('input[id=date_seance]').attr('disabled',true)
                  let datarr = {};

                  datarr['groupeClasse'] = 0;
                  datarr['parGroupe'] = info.event.extendedProps.parGroupe;
                  datarr['seance'] = info.event.id;
                  datarr['date'] = calendar.formatDate(info.event.start, 'YYYY-MM-DD');
                  $("#delete-btn-js").click(function () {
                      $.post('{{ path('deleteSeanceNotAffected') }}', datarr).then(function (data) {
                          console.log(data['response'])
                          if (data['response'] === 'ok') {
                              location.reload();
                          } else {
                              $('#err_message_supp').html(data['response']);
                          }
                      })
                  });
                  if (info.event.extendedProps.parGroupe) {
                      $.post('{{ path('getAttendanceBySeanceAndDateAjax') }}', datarr).then(function (data) {
                          $('#tbl-eleve > tbody#list-attendance').html('');
                          // $('#delete-btn-js').hide()
                          $('#err_message_supp').html('');
                          if (Object.keys(data).length !== 0) {
                              succuss = true;
                              nvpargroup = false;
                              let groupetxt = '';
                              $.each(data, function (id, value) {
                                  let groupe = '';
                                  let nom = '';
                                  let remarque = '';
                                  let present = '';
                                  let absent = '';
                                  $.each(value, function (key, datat) {
                                      if (key === 'remarque') {
                                          remarque = datat;
                                      }
                                      if (key === 'nom') {
                                          nom = datat;
                                      }
                                      if (key === 'groupe') {
                                          groupe = datat;
                                          groupetxt = 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 + " (" + groupe + ")</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);
                              });
                              $('select#gpClasses').hide()
                              $('h4#gpClassestext').html(groupetxt);
                              $('h4#gpClassestext').show();

                              $('h4#title-feuille-js').html("{{ 'admin.classe.Modifier_feuille_appel'|trans }}")
                          } else {
                              $('select#gpClasses').on('change', function () {
                                  if (this.value > 0) {
                                      datarr['groupeClasse'] = this.value;
                                      $.post('{{ path('getEleveBySeanceAjax') }}', datarr).then(function (data) {
                                          $('#tbl-eleve > tbody#list-attendance').html('');
                                          // $('#delete-btn-js').hide()
                                          $('#err_message_supp').html('');
                                          if (Object.keys(data).length !== 0) {
                                              succuss = true;
                                              $('#tbl-eleve > tbody#list-attendance')
                                              $.each(data, function (id, name) {
                                                  let trcontent = "" +
                                                      "<tr data-id-eleve=\"" + id + "\" class=\"sonata-collection-row\">" +
                                                      "    <td>" + name + "</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)
                                                  $('#delete-btn-js').show()

                                              });
                                          }

                                      });
                                  }
                              });
                          }
                      });

                  } else {
                      $('select#gpClasses').hide()
                    {% if app.request.locale == 'fr' %}
                      $('h4#gpClassestext').html('Toute la classe')
                    {% elseif app.request.locale == 'en' %}
                      $('h4#gpClassestext').html('Whole class')
                    {% elseif app.request.locale == 'ar_Tn' %}
                      $('h4#gpClassestext').html('كل الصف')
                    {% endif %}
                      $('h4#gpClassestext').show()
                      $.post('{{ path('getAttendanceBySeanceAndDateAjax') }}', datarr).then(function (data) {
                          $('#tbl-eleve > tbody#list-attendance').html('');
                          // $('#delete-btn-js').hide()
                          $('#err_message_supp').html('');
                          if (Object.keys(data).length !== 0) {
                              succuss = true;
                              $.each(data, function (id, value) {
                                  let groupe = '';
                                  let nom = '';
                                  let remarque = '';
                                  let present = '';
                                  let absent = '';
                                  $.each(value, function (key, datat) {
                                      if (key === 'remarque') {
                                          remarque = datat;
                                      }
                                      if (key === 'nom') {
                                          nom = datat;
                                      }
                                      if (key === 'groupe') {
                                          groupe = 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 + " (" + groupe + ")</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);
                                  $('h4#title-feuille-js').html("{{ 'admin.classe.Modifier_feuille_appel'|trans }}")
                              });
                          } else {
                              $.post('{{ path('getEleveBySeanceAjax') }}', datarr).then(function (data) {
                                  if (Object.keys(data).length !== 0) {
                                      succuss = true;
                                      $('#tbl-eleve > tbody#list-attendance')
                                      $.each(data, function (id, name) {
                                          let trcontent = "" +
                                              "<tr data-id-eleve=\"" + id + "\" class=\"sonata-collection-row\">" +
                                              "    <td>" + name + "</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)
                                          $('#delete-btn-js').show()

                                      });
                                  }

                              });

                          }
                      })
                  }
                  // show modal dialog
                  $('#appelle-modal').modal('show');
              },
              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');

              },
              eventRender: function (info) {
                  console.log("_______ info _______\n");
                  console.log(info.event.extendedProps);
              },
              eventAfterRender: function (event, element, view) {
                  $(element).css('width', '50%');
              }

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