{% 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=coxes, 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) }}
	{{ macros::input(label="Kommentar", name="comments", type="text") }}
	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
	<select multiple="multiple" name="rower[]">
		{% for user in users %}
			<option value="{{ user.id }}" onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
		{% endfor %}
	</select>
	<input type="submit" />
	
	<script>
  const currentDate = new Date();
  const localTime = new Date(currentDate.getTime() - (currentDate.getTimezoneOffset() * 60000));
  const formattedDate = localTime.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.name }}<br />
    Schiffsführer: {{ log.shipmaster_user.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 />
    Ruderer: 
    {% for rower in log.rowers %}
    	{{ rower.name }}
    {% endfor %}
    {% set amount_rowers = log.rowers | length %}
    {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
    {{ amount_guests }} Gäste (ohne Account)
    {% if log.shipmaster == loggedin_user.id %}
      <form action="/log/{{log.id}}" method="post">
        Destination: <input type="search" list="destinations" placeholder="Destination" id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
          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');
              document.getElementById('distance_in_km_home').value = distance;
              break;
            }
          }">
        {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km) }}
        {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
        {{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
	<select multiple="multiple" name="rower[]">
		{% for user in users %}
		  {% set_global selected = false %}
		  {% for rower in log.rowers %}
		      {% if rower.id == user.id %}
		  	{% set_global selected = true %}
		      {% endif %}
		  {% endfor %}
			<option value="{{ user.id }}" {% if selected %}selected{% endif %} onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
		{% endfor %}
	</select>
        <input type="submit" value="AUSFAHRT BEENDEN"/>
      </form>
    {% endif %}
    <hr />
  {% endfor %}

  <h2 style="font-size: 100px">Einträge</h2>
  {% for log in completed %}
  	Bootsname: {{ log.boat.name }}<br />
	Schiffsführer: {{ log.shipmaster_user.name }}<br />
	{% if log.shipmaster_only_steering %}
		Schiffsführer steuert nur
	{% endif %}
        Ruderer: 
        {% for rower in log.rowers %}
        	{{ rower.name }}
        {% endfor %}
        {% set amount_rowers = log.rowers | length %}
        {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
        {{ amount_guests }} Gäste (ohne Account)
	Weggefahren: {{ log.departure }}<br />
	Angekommen: {{ log.arrival}}<br />
	Ziel: {{ log.destination }}<br />
  Km: {{ log.distance_in_km }}<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%}