{% extends "base.html" %}
{% load course %}

{% block title %}
  Moduł {{ module.order|add:1 }}: {{ module.title }}
{% endblock %}
{% block content %}
{% with course=module.course %}
  <h1>Kurs "{{ course.title }}"</h1>
  <div class="contents">
    <h3>Moduły</h3>
    <ul id="modules">
      {% for m in course.modules.all %}
         <li data-id="{{ m.id }}" {% if m == module %}
          class="selected"{% endif %}>
           <a href="{% url "module_content_list" m.id %}">
            <span>
              Moduł <span class="order">{{ m.order|add:1 }}</span>
            </span>
            <br>
            {{ m.title }}
          </a>
        </li>
      {% empty %}
        <li>Brak modułów.</li>
      {% endfor %}
    </ul>
    <p><a href="{% url "course_module_update" course.id %}">
    Edytuj moduły</a></p>
  </div>
  <div class="module">
    <h2>Moduł {{ module.order|add:1 }}: {{ module.title }}</h2>
    <h3>Zawartość modułu:</h3>

    <div id="module-contents">
      {% for content in module.contents.all %}
        <div data-id="{{ content.id }}">
          {% with item=content.item %}
          <p>{{ item }} ({{ item|model_name }})</p>
          <a href="{% url "module_content_update" module.id item|model_name item.id %}">
            Edytuj
          </a>
             <form action="{% url "module_content_delete" content.id %}"
              (method="post">
               <input type="submit" value="Usuń">
              {% csrf_token %}
            </form>
          {% endwith %}
        </div>
      {% empty %}
        <p>Ten moduł nie zawiera jeszcze treści.</p>
      {% endfor %}
    </div>
    <h3> Dodaj nową treść:</h3>
    <ul class="content-types">
      <li>
        <a href="{% url "module_content_create" module.id "text" %}">
          Tekst
        </a>
      </li>
      <li>
        <a href="{% url "module_content_create" module.id "image" %}">
          Obraz
        </a>
      </li>
      <li>
        <a href="{% url "module_content_create" module.id "video" %}">
          Wideo
        </a>
      </li>
      <li>
        <a href="{% url "module_content_create" module.id "file" %}">
          Plik
        </a>
      </li>
    </ul>
  </div>
{% endwith %}
{% endblock %}

{% block include_js %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.13.3/html5sortable.min.js"></script>
{% endblock %}

{% block domready %}
  var options = {
      method: 'POST',
      mode: 'same-origin'
  }
  const moduleOrderUrl = '{% url "module_order" %}';
  sortable('#modules', {
    forcePlaceholderSize: true,
    placeholderClass: 'placeholder'
  })[0].addEventListener('sortupdate', function(e) {

    modulesOrder = {};
    var modules = document.querySelectorAll('#modules li');
    modules.forEach(function (module, index) {
      // zaktualizuj indeks modułu
      modulesOrder[module.dataset.id] = index;
      // zaktualizuj indeks w elemencie HTML 
      module.querySelector('.order').innerHTML = index + 1;
      // dodaj nową kolejność do opcji żądania HTTP
      options['body'] = JSON.stringify(modulesOrder);

      // wysłanie żądania HTTP
      fetch(moduleOrderUrl, options)
     });
  });

  const contentOrderUrl = '{% url "content_order" %}';
  sortable('#module-contents', {
    forcePlaceholderSize: true,
    placeholderClass: 'placeholder'
  })[0].addEventListener('sortupdate', function(e) {

    contentOrder = {};
    var contents = document.querySelectorAll('#module-contents div');
    contents.forEach(function (content, index) {
      // aktualizacja indeksu treści
      contentOrder[content.dataset.id] = index;
      // dodaj nową kolejność do opcji żądania HTTP
      options['body'] = JSON.stringify(contentOrder);

      // wysłanie żądania HTTP
      fetch(contentOrderUrl, options)
     });
  });

{% endblock %}
