{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <a hx-boost="true" class="button is-link level-item" href="/?date={{ date.pred() }}">&larr;</a>
      </div>
      <div class="control level-item is-flex-grow-0">
        <input id="date-selector" class="input" type="date" value="{{ date }}">
      </div>
      <div class="level-right">
        <a hx-boost="true" class="button is-link level-item" href="/?date={{ date.succ() }}">&rarr;</a>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <h3 class="title is-3">
          Events am {{ date.format("%d.%m.%Y") }}
        </h3>
      </div>
      <div class="level-right">
        <a class="button" href="/events/new?date={{ date }}">Neues Event für diesen Tag</a>
      </div>
    </div>

    {% if events.len() == 0 %}
    <div class="box">
      <h5 class="title is-5">keine Events geplant</h5>
    </div>
    {% else %}
    {% for event in events %}
    <div class="box">
      {% if event.canceled %}<b>Veranstaltung abgesagt!</b>{% endif %}
      <div class="level">
        <h5 class="title is-5 level-left">{{ event.name }}</h5>
        <span class="level-right">
          {% if user.role == Role::AreaManager || user.role == Role::Admin %}
          <a href="/assignments/new?event={{ event.id }}" class="button is-primary level-item">Planen</a>
          <a href="" class="button is-primary-light level-item">bearbeiten</a>
          <a href="" class="button is-warning level-item">als abgesagt markieren</a>
          {% endif %}
        </span>
      </div>
      <p>Ort: {{ event.location.as_ref().unwrap().name }}</p>
      <p>Zeitraum: {{ event.start_time }} bis {{ event.end_time }}</p>
      <p>Anzahl der Posten: {{ event.amount_of_posten }}</p>
      <p>Wachhabender durch FF gestellt: {{ event.voluntary_wachhabender }}</p>
      <p>Kleidungsordnung: {{ event.clothing }}</p>
    </div>
    {% endfor %}
    {% endif %}
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <h3 class="title is-3">
          Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
        </h3>
      </div>
      <div class="level-right">
        <a class="button" href="/availabillity/new?date={{ date }}">Neue Verfügbarkeit für diesen Tag</a>
      </div>
    </div>

    {% if availabillities.len() == 0 %}
    <div class="box">
      <h5 class="title is-5">keine Verfügbarkeiten eingetragen</h5>
    </div>
    {% else %}
    <div class="box">
      <table class="table is-fullwidth">
        <thead>
          <tr>
            <th>Name</th>
            <th>Funktion</th>
            <th>Zeitraum</th>
            <th>Kommentar</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for availabillity in availabillities %}
          {% let u = availabillity.user.as_ref().unwrap() %}
          <tr id="availabillity-{{ availabillity.id }}">
            <td>{{ u.name }}</td>
            <td>
              {% match u.function %}
              {% when Function::Posten %}
              <span class="tag is-info is-light">Posten</span>
              {% when Function::Wachhabender %}
              <span class="tag is-info">Wachhabender</span>
              {% else %}
              {% endmatch %}
            </td>
            <td>
              {% if availabillity.start_time.is_some() && availabillity.end_time.is_some() %}
              {{ availabillity.start_time.as_ref().unwrap().format("%R") }} bis {{
              availabillity.end_time.as_ref().unwrap().format("%R") }}
              {% else %}
              ganztägig
              {% endif %}
            </td>
            <td>
              {{ availabillity.comment.as_deref().unwrap_or("") }}
            </td>
            <td>
              {% if availabillity.user_id == user.id %}
              <div class="buttons is-right">
                <a class="button is-link" href="/availabillity/edit/{{ availabillity.id }}">Bearbeiten</a>
                <button class="button is-danger" name="delete-availabillity">Löschen</button>
              </div>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}

  </div>
</section>

<script>
  document.getElementsByName("delete-availabillity")
    .forEach(ele => ele.addEventListener("click", (event) => {
      const id = event.target.closest("tr").id.split('-')[1];
      event.target.classList.add("is-loading");

      fetch(`/availabillity/delete/${id}`, {method: "DELETE"})
        .then(response => {
          if (response.status == 204) {
            document.getElementById(`availabillity-${id}`).remove()
          } else {
            event.target.classList.remove("is-loading");
            console.log("Fehler beim Löschen.")
          }
        });
    }));

  document.getElementById("date-selector").addEventListener("change", (event) => {
    if (event.target.value) {
      document.location.replace(`/?date=${event.target.value}`)
    } else {
      document.location.replace("/")
    }
  });

</script>
{% endblock %}