<%- include('../layout') %>

<h2>Zeiteintrag bearbeiten</h2>

<form method="POST">

  <label class="form-label">Datum</label>
  <input type="date" name="date" class="form-control" value="<%= entry.date %>" required>

  <label class="form-label mt-3">Startzeit</label>
  <input type="time" name="start_time" id="start_time" class="form-control" value="<%= entry.start_time %>" required>

  <label class="form-label mt-3">Endzeit</label>
  <input type="time" name="end_time" id="end_time" class="form-control" value="<%= entry.end_time %>" required>

  <label class="form-label mt-3">Stunden (automatisch)</label>
  <input type="text" id="hours" class="form-control" value="" readonly>

  <label class="form-label mt-3">Beschreibung</label>
  <textarea name="description" class="form-control" rows="4"><%= entry.description %></textarea>

  <button class="btn btn-primary mt-3">Speichern</button>
</form>

<script>
function calcHours() {
  const s = document.getElementById('start_time').value;
  const e = document.getElementById('end_time').value;

  if (!s || !e) {
    document.getElementById('hours').value = "0.00";
    return;
  }

  const [sh, sm] = s.split(':').map(Number);
  const [eh, em] = e.split(':').map(Number);

  const start = sh + sm / 60;
  const end = eh + em / 60;

  const diff = (end - start).toFixed(2);
  document.getElementById('hours').value = diff;
}

// Beim Laden berechnen
calcHours();

// Bei Änderung neu berechnen
document.getElementById('start_time').addEventListener('change', calcHours);
document.getElementById('end_time').addEventListener('change', calcHours);
</script>

<%- include('../footer') %>
