{% extends "base.html" %}

{% block title %}Mahnungsübersicht - {{ APP_VERSION }}{% endblock %}

{% block content %}
<style>
  .mahnungen-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
  }

  .mahnungen-head {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .mahnungen-head h1 {
    margin: 0;
    font-size: 1.55rem;
    color: #1e293b;
  }

  .head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .search-box-wrapper {
    margin-bottom: 16px;
  }

  .search-box {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .search-box:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .mahnungen-card {
    background: var(--ui-surface, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }

  .mahnungen-table {
    width: 100%;
    border-collapse: collapse;
  }

  .mahnungen-table th,
  .mahnungen-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
    text-align: left;
  }

  .mahnungen-table th {
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: var(--ui-surface-soft, #f8fafc);
  }

  .mahnungen-table tr:hover td {
    background: #fbfdff;
  }

  .badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }

  .badge-open { background: #fee2e2; color: #991b1b; }
  .badge-warning { background: #fef3c7; color: #b45309; }
  .badge-info { background: #e0f2fe; color: #0369a1; }
  .badge-paid { background: #dcfce7; color: #166534; }

  .mono {
    font-family: monospace;
    font-size: 0.92rem;
  }

  .text-danger {
    color: #dc2626;
    font-weight: 700;
  }

  .empty-state {
    text-align: center;
    color: #6b7280;
    padding: 36px 20px;
  }

  @media (max-width: 900px) {
    .mahnungen-table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  }
</style>

<div class="mahnungen-shell">
  <div class="mahnungen-head">
    <h1>Mahnungsübersicht</h1>
    <div class="head-actions">
      <a class="btn btn-outline-secondary" href="{{ url_for('library_loans_admin') }}">Zur Ausleihenverwaltung</a>
      <a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
    </div>
  </div>

  <div class="mahnungen-card">
    {% if overdue_list %}
      <div class="search-box-wrapper">
        <input type="text" id="searchInput" class="search-box" placeholder="🔍 Suche nach Nutzer, Klasse oder Gegenstand..." onkeyup="filterTable()">
      </div>

      <table class="mahnungen-table" id="mahnungTable">
        <thead>
          <tr>
            <th>Nutzer</th>
            <th>Klasse</th>
            <th>Gegenstand</th>
            <th>Fällig am</th>
            <th>Tage drüber</th>
            <th>Mahnstufe</th>
            <th>Konto-Status</th>
          </tr>
        </thead>
        <tbody>
          {% for item in overdue_list %}
          <tr>
            <td><strong>{{ item.user or '—' }}</strong></td>
            <td>{{ item.klasse or '—' }}</td>
            <td>{{ item.item_name or '—' }}</td>
            <td><span class="mono">{{ item.due_date or '—' }}</span></td>
            <td class="text-danger">{{ item.days_overdue }} Tage</td>
            <td>
              {% if item.mahnstufe == 2 %}
                <span class="badge-pill badge-open">Stufe 2 (Gesperrt)</span>
              {% elif item.mahnstufe == 1 %}
                <span class="badge-pill badge-warning">Stufe 1 (Gewarnt)</span>
              {% else %}
                <span class="badge-pill badge-info">Stufe 0 (Neu)</span>
              {% endif %}
            </td>
            <td>
              {% if item.is_blocked %}
                <span class="badge-pill badge-open">Gesperrt</span>
              {% else %}
                <span class="badge-pill badge-paid">Aktiv</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <div class="empty-state">
        <strong>Hervorragend!</strong> Aktuell gibt es keine überfälligen Ausleihen im System.
      </div>
    {% endif %}
  </div>
</div>

<script>
  function filterTable() {
    const input = document.getElementById("searchInput");
    const filter = input.value.toLowerCase();
    const table = document.getElementById("mahnungTable");
    const tr = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    for (let i = 0; i < tr.length; i++) {
      const tdUser = tr[i].getElementsByTagName("td")[0];
      const tdClass = tr[i].getElementsByTagName("td")[1];
      const tdItem = tr[i].getElementsByTagName("td")[2];

      if (tdUser || tdClass || tdItem) {
        const textUser = tdUser.textContent || tdUser.innerText;
        const textClass = tdClass.textContent || tdClass.innerText;
        const textItem = tdItem.textContent || tdItem.innerText;

        if (
          textUser.toLowerCase().indexOf(filter) > -1 ||
          textClass.toLowerCase().indexOf(filter) > -1 ||
          textItem.toLowerCase().indexOf(filter) > -1
        ) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
</script>
{% endblock %}