{% extends "base.html" %}

{% block title %}Zeitkonto · {{ user.first_name }} {{ user.last_name }}{% endblock %}
{% block heading %}⏱️ {{ user.first_name }} {{ user.last_name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/personal/time-account" class="hover:underline">Zeitkonto</a> / {{ user.first_name }} {{ user.last_name }}</p>{% endblock %}

{% block content %}
<style>
  .bal-pos { color:#059669; font-weight:600; }
  .bal-neg { color:#dc2626; font-weight:600; }
  .kind-pill { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; }
  .kind-work { background:rgba(59,130,246,0.15); color:#1d4ed8; }
  .kind-vacation { background:rgba(16,185,129,0.15); color:#059669; }
  .kind-sick { background:rgba(245,158,11,0.15); color:#b45309; }
  .kind-holiday { background:rgba(168,85,247,0.15); color:#7e22ce; }
  .kind-adjustment { background:rgba(115,115,115,0.15); color:#525252; }
  .kind-payout { background:rgba(239,68,68,0.15); color:#dc2626; }
</style>

<div class="grid grid-cols-3 gap-4">
  <!-- Aktueller Saldo -->
  <div class="card col-span-1">
    <div class="card-header"><h2>Aktueller Saldo</h2></div>
    <div class="p-5 text-center">
      <div style="font-size: 36px; font-weight: 700;"
           class="{% if balance_minutes > 0 %}bal-pos{% elif balance_minutes < 0 %}bal-neg{% endif %} nums">
        {{ "%+.2f"|format(balance_hours) }} h
      </div>
      {% set days = (balance_hours / ((user.weekly_hours or 40) / 5.0)) if user.weekly_hours else 0 %}
      <div class="text-sm text-neutral-500 mt-1 nums">≈ {{ "%+.1f"|format(days) }} Arbeitstage</div>
      <div class="text-xs text-neutral-500 mt-3">
        Wochen-Soll: <strong>{{ user.weekly_hours or 40 }} h</strong>
        {% if user.hourly_wage %} · Stunden-Lohn: <strong class="nums">{{ "%.2f"|format(user.hourly_wage) }} €</strong>{% endif %}
      </div>
    </div>
  </div>

  <!-- Manueller Eintrag -->
  <div class="card col-span-1">
    <div class="card-header"><h2>Eintrag anlegen</h2></div>
    <form method="post" action="/personal/time-account/{{ user.id }}/entry" class="p-5 space-y-2 text-sm">
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Datum</label>
        <input class="input mt-1 w-full nums" type="date" name="date" required value="{{ today }}">
      </div>
      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Soll (Min)</label>
          <input class="input mt-1 w-full nums" type="number" name="target_minutes" min="0" value="480">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Ist (Min)</label>
          <input class="input mt-1 w-full nums" type="number" name="actual_minutes" min="0" value="480">
        </div>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Art</label>
        <select name="kind" class="select mt-1 w-full">
          <option value="work">Arbeit</option>
          <option value="vacation">Urlaub</option>
          <option value="sick">Krank</option>
          <option value="holiday">Feiertag</option>
          <option value="adjustment">Korrektur</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Notiz</label>
        <input class="input mt-1 w-full" type="text" name="note">
      </div>
      <button class="btn btn-primary btn-sm w-full" type="submit">Eintragen</button>
    </form>
  </div>

  <!-- Auszahlung (bei Austritt) -->
  <div class="card col-span-1">
    <div class="card-header"><h2>Auszahlung berechnen</h2></div>
    <form method="post" action="/personal/time-account/{{ user.id }}/payout" class="p-5 space-y-2 text-sm"
          onsubmit="return confirm('Saldo auf 0 setzen + Auszahlungs-Eintrag erzeugen? Diese Aktion kann manuell rückgängig gemacht werden, ist aber für Austritts-Buchungen gedacht.');">
      <p class="text-xs text-neutral-500">
        Bei Austritt eines Mitarbeiters: aktueller Saldo wird in Stunden umgerechnet und mit
        dem Stunden-Lohn multipliziert. Saldo wird auf 0 gesetzt.
      </p>
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Stunden-Lohn (€)</label>
        <input class="input mt-1 w-full nums" type="number" step="0.01" min="0"
               name="hourly_rate_eur" required
               value="{{ "%.2f"|format(user.hourly_wage or 25.0) }}">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Notiz</label>
        <input class="input mt-1 w-full" type="text" name="note" value="Austritts-Auszahlung">
      </div>
      {% if balance_hours != 0 %}
        <p class="text-xs nums">
          Vorausschau: {{ balance_hours }} h × <span id="rate-display">25.00</span> €/h =
          <strong id="payout-display"></strong>
        </p>
      {% endif %}
      <button class="btn btn-secondary btn-sm w-full"
              style="border-color:rgba(239,68,68,0.4); color:#dc2626;"
              type="submit">Saldo auszahlen + auf 0 setzen</button>
    </form>
  </div>
</div>

<!-- Historie -->
<div class="card" style="margin-top:14px;">
  <div class="card-header">
    <div>
      <h2>Tages-Historie</h2>
      <p class="sub">{{ entries|length }} Eintrag{% if entries|length != 1 %}{% endif %} · neueste zuerst</p>
    </div>
  </div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Datum</th>
        <th>Art</th>
        <th class="num">Soll</th>
        <th class="num">Ist</th>
        <th class="num">Δ</th>
        <th>Notiz</th>
      </tr>
    </thead>
    <tbody>
      {% for e in entries %}
        <tr>
          <td class="nums">{{ e.date }}</td>
          <td><span class="kind-pill kind-{{ e.kind }}">{{ e.kind }}</span></td>
          <td class="num nums">{{ e.target_minutes }} min</td>
          <td class="num nums">{{ e.actual_minutes }} min</td>
          <td class="num nums">
            <span class="{% if e.delta_minutes > 0 %}bal-pos{% elif e.delta_minutes < 0 %}bal-neg{% endif %}">
              {{ "%+d"|format(e.delta_minutes) }} min
            </span>
          </td>
          <td class="text-xs">{{ e.note or '—' }}</td>
        </tr>
      {% else %}
        <tr><td colspan="6" style="text-align:center;padding:24px;color:var(--card-text-muted);">
          Noch keine Einträge — über die Schicht-/Zeiterfassung werden Tages-Werte automatisch befüllt.
        </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  // Live-Vorausschau Auszahlung
  (function() {
    var rate = document.querySelector('input[name="hourly_rate_eur"]');
    var rd = document.getElementById('rate-display');
    var pd = document.getElementById('payout-display');
    if (!rate || !pd) return;
    var hrs = {{ balance_hours }};
    function recalc() {
      var r = parseFloat(rate.value || 0);
      if (rd) rd.textContent = r.toFixed(2);
      pd.textContent = (hrs * r).toFixed(2) + ' €';
    }
    rate.addEventListener('input', recalc);
    recalc();
  })();
</script>
{% endblock %}