{% import "includes/macros" as macros %}

{% extends "base" %}

{% block content %}

  {% if flash %}
    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
  {% endif %}

<div class="max-w-screen-lg w-full">
  <h1 class="h1">Logbuch</h1>
  <h2>Neue Ausfahrt starten</h2>
  <form action="/log" method="post" id="form">
	{{ macros::select(data=boats, select_name='boat_id') }}
	{{ macros::select(data=users, select_name='shipmaster', selected_id=loggedin_user.id) }}
        {{ macros::checkbox(label='shipmaster_only_steering', name='shipmaster_only_steering') }} <!-- TODO: depending on boat, deselect by default -->
	Departure: <input type="datetime-local" id="datetime-dep" value="2023-07-24T08:00" name="departure" required/>
	Arrival: <input type="datetime-local" id="datetime-arr" name="arrival" />
	Destination: <input type="search" list="destinations" placeholder="Destination" name="destination" id="destination" oninput="var inputElement = document.getElementById('destination');
  var dataList = document.getElementById('destinations');
  var selectedValue = inputElement.value;
  for (var i = 0; i < dataList.options.length; i++) {
    if (dataList.options[i].value === selectedValue) {
      var distance = dataList.options[i].getAttribute('distance');
      console.log(distance);
      document.getElementById('distance_in_km').value = distance;
      break;
    }
  }">
	<datalist id="destinations">
  		<option value="Ottensheim" distance=25 />
  		<option value="Ottensheim + Regattastrecke" distance=29 />
	</datalist>
	{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=0) }}<!-- TODO: depending on destination, pre-fill this distance -->
	{{ macros::input(label="Kommentar", name="comments", type="text") }}
	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
	<input type="submit" />
	
	<script>
	
  // Get the current date and time
  const currentDate = new Date();

  // Format the date and time as a string in the format "YYYY-MM-DDTHH:mm"
  const formattedDate = currentDate.toISOString().slice(0, 16);

  // Set the formatted string as the value of the input field
  document.getElementById("datetime-dep").value = formattedDate;

	</script>
  </form>

  <h2 style="font-size: 100px">Am Wasser</h2>
  {% for log in on_water %}
  	Bootsname: {{ log.boat }}<br />
	Schiffsführer: {{ log.shipmaster_name }}<br />
	{% if log.shipmaster_only_steering %}
		Schiffsführer steuert nur
	{% endif %}
	Weggefahren: {{ log.departure }}<br />
	Ziel: {{ log.destination }}<br />
	Kommentare: {{ log.comments }}<br />
	Logtype: {{ log.logtype }}<br />
	<hr />
  {% endfor %}

  <h2 style="font-size: 100px">Einträge</h2>
  {% for log in completed %}
  	Bootsname: {{ log.boat }}<br />
	Schiffsführer: {{ log.shipmaster_name }}<br />
	{% if log.shipmaster_only_steering %}
		Schiffsführer steuert nur
	{% endif %}
	Weggefahren: {{ log.departure }}<br />
	Angekommen: {{ log.arrival}}<br />
	Ziel: {{ log.destination }}<br />
	Kommentare: {{ log.comments }}<br />
	Logtype: {{ log.logtype }}<br />
	<hr />
  {% endfor %}
</div>

<script>
document.getElementById('form').addEventListener('submit', function(e) {
    e.preventDefault();
    for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
    console.log(optional_elem);
      let myInput = document.getElementById(optional_elem);
      if (myInput.value === '') {
          myInput.removeAttribute('name');
      }
    }
    this.submit();
});
</script>
{% endblock content%}