{% extends "base.html" %}

{% block title %}Urlaubsantrag{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vacation" class="hover:underline">Urlaubsplaner</a> / Neu</p>{% endblock %}
{% block heading %}Urlaubsantrag stellen{% endblock %}

{% block content %}

{% if balance %}
<div class="alert alert-blue text-sm max-w-3xl">
  <p class="font-medium">Dein Konto: {{ balance.entitled }} T Anspruch · {{ balance.used }} T genommen · {{ balance.requested }} T beantragt → {{ balance.entitled - balance.used - balance.requested }} T verfügbar</p>
</div>
{% endif %}

<form method="post" action="/vacation/new" class="card max-w-3xl">
  <div class="card-header"><div><h2>Antrag</h2></div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mitarbeiter *</label>
      <select class="select mt-1 w-full" name="user_id" required>
        {% for u in users %}
          <option value="{{ u.id }}" {% if current_user and current_user.id == u.id %}selected{% endif %}>
            {{ u.first_name }} {{ u.last_name }}
            {% if u.role_name %} · {{ u.role_name }}{% endif %}
          </option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Von *</label>
      <input class="input mt-1 w-full nums" type="date" name="start_date" required id="start">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bis *</label>
      <input class="input mt-1 w-full nums" type="date" name="end_date" required id="end">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Anmerkung (optional)</label>
      <textarea class="input mt-1 w-full" rows="2" name="note" placeholder="z.B. Urlaub mit Familie, Brückentag, Ski-Woche"></textarea>
    </div>
    <div id="days-preview" class="col-span-2 text-sm text-neutral-600 nums">
      Wähle Datum-Bereich — Werktage werden automatisch gezählt (Mo–Fr).
    </div>
  </div>
  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <a class="btn btn-secondary" href="/vacation">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Antrag einreichen</button>
  </div>
</form>

<script>
function calcDays() {
  const s = document.getElementById('start').value;
  const e = document.getElementById('end').value;
  const out = document.getElementById('days-preview');
  if (!s || !e) return;
  const start = new Date(s), end = new Date(e);
  if (end < start) { out.textContent = 'Enddatum muss nach Startdatum liegen.'; return; }
  let days = 0, d = new Date(start);
  while (d <= end) {
    const wd = d.getDay();
    if (wd !== 0 && wd !== 6) days++;
    d.setDate(d.getDate() + 1);
  }
  out.innerHTML = `<strong>${days}</strong> Werktag${days===1?'':'e'} (Mo–Fr) — Feiertage werden bei der Speicherung serverseitig abgezogen.`;
}
document.getElementById('start').addEventListener('input', calcDays);
document.getElementById('end').addEventListener('input', calcDays);
</script>
{% endblock %}