{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <form>
      <h1 class="title">Neue Vefügbarkeit für den {{ date.format("%d.%m.%Y") }}</h1>
      <div class="field is-horizontal">
	<div class="field-label">
	  <label class="label">Funktion</label>
	</div>
	<div class="field-body">
	  <div class="field">
	    <div class="control">
	      <div class="select">
		<select name="function">
		  <option value="1">Posten</option>
		  <option value="10">Wachhabender</option>
		</select>
	      </div>
	    </div>
	  </div>
	</div>
      </div>

      <div class="field is-horizontal">
	<div class="field-label">
	  <label class="label">Zeitangabe</label>
	</div>
	<div class="field-body">
	  <div class="field">
	    <div class="control">
	      <label class="radio">
		<input type="radio" id="wholeDay" name="hasTime" checked>
		  ganztägig
	      <label class="radio">
		<input type="radio" id="partDay" name="hasTime">
		  zeitweise
	      </label>
	    </div>
	  </div>
	</div>
      </div>

      <div class="field is-horizontal">
	<div class="field-label">
	  <label class="label">Von - Bis</label>
	</div>
	<div class="field-body">
	  <div class="field">
	    <input class="input" type="time" id="from" value="00:00" disabled>
	  </div>
	  <div class="field">
	    <input class="input" type="time" id="till" value="23:59" disabled>
	  </div>
	</div>
      </div>

      <div class="field is-horizontal">
	<div class="field-label"></div>
	<div class="field-body">
	  <div class="field is-grouped">
	    <div class="control">
	      <input class="button is-link" type="submit" value="Erstellen">
	    </div>
	    <div class="control">
	      <a class="button is-link is-light" href="/?date={{ date }}">Zurück</a>
	    </div>
	  </div>
	</div>
      </div>
    </form>
  </div>
</section>

<script>
  const wholeDay = document.getElementById("wholeDay");
  const partDay = document.getElementById("partDay");
  
  const from = document.getElementById("from");
  const till = document.getElementById("till");

  let lastFrom = null;
  let lastTill = null;

  wholeDay.addEventListener("click", (event) => {
    from.disabled = true
    till.disabled = true

    lastFrom = from.value;
    lastTill = till.value;

    from.value = null;
    till.value = null;
  });

  partDay.addEventListener("click", (event) => {
    from.disabled = false
    till.disabled = false

    if (lastFrom != null) {
      from.value = lastFrom;
    }

    if (lastTill != null) {
      till.value = lastTill;
    }
  });
</script>
{% endblock %}