{% extends "base.html" %}

{% block content %}
  <div class="page-section-title">
    <h1>Übersicht</h1>
    <p>Zentraler Einstieg für Bestand, Suche, Bewegungen und Protokolle.</p>
  </div>

  <div class="grid mb-4">
    <section class="card">
      <div class="card-body">
        <h2 class="card-title"><i class="ti ti-search me-1"></i>Suche</h2>
        <form method="get" action="{{ url_for('index') }}">
          <div class="mb-3">
            <label class="form-label">Name, E-Mail oder Kennung</label>
            <input class="form-control" type="text" name="q" value="{{ search_query }}" placeholder="z. B. Max oder CHIP-1001">
          </div>
          <button class="btn btn-primary" type="submit">Suchen</button>
        </form>
      </div>
    </section>

    <section class="card">
      <div class="card-body">
        <h2 class="card-title"><i class="ti ti-chart-donut-3 me-1"></i>Bestand</h2>
        <div class="stats-grid">
          <div class="card stat-card stat-card-users">
            <div class="card-body">
              <div>
                <div class="stat-label">User</div>
                <div class="stat-value">{{ stats.users }}</div>
              </div>
              <div class="stat-icon"><i class="ti ti-users"></i></div>
            </div>
          </div>
          <div class="card stat-card stat-card-chips">
            <div class="card-body">
              <div>
                <div class="stat-label">Türchips</div>
                <div class="stat-value">{{ stats.active_chips }}</div>
              </div>
              <div class="stat-icon"><i class="ti ti-key"></i></div>
            </div>
          </div>
          <div class="card stat-card stat-card-cards">
            <div class="card-body">
              <div>
                <div class="stat-label">Parkkarten</div>
                <div class="stat-value">{{ stats.active_cards }}</div>
              </div>
              <div class="stat-icon"><i class="ti ti-credit-card"></i></div>
            </div>
          </div>
          <div class="card stat-card stat-card-pool" style="background: linear-gradient(135deg, #1f6f8b 0%, #14505f 100%); color: #ffffff;">
            <div class="card-body">
              <div>
                <div class="stat-label">Poolfahrzeuge</div>
                <div class="stat-value">{{ stats.active_pool_vehicles }}</div>
              </div>
              <div class="stat-icon"><i class="ti ti-car"></i></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <section class="card mb-4">
    <div class="card-header">
      <h2 class="card-title"><i class="ti ti-users me-1"></i>User</h2>
    </div>
    <div class="table-responsive table-wrap card-table-shell">
    {% if users %}
      <table class="table table-vcenter card-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>E-Mail</th>
            <th>Abteilung</th>
            <th>Türchip</th>
            <th>Parkkarte</th>
            <th>Poolfahrzeug</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
            <tr>
              <td>{% set parts = user.full_name.rsplit(' ', 1) %}{{ parts[1] }}, {{ parts[0] }}</td>
              <td>{{ user.email or "-" }}</td>
              <td>{{ user.department or "-" }}</td>
              <td>
                {% if user.chip_code %}
                  {{ user.chip_code }}<br>
                  <span class="muted">seit {{ user.chip_assigned_at }}</span>
                {% else %}
                  -
                {% endif %}
              </td>
              <td>
                {% if user.parking_card_code %}
                  {{ user.parking_card_code }}<br>
                  <span class="muted">seit {{ user.parking_card_assigned_at }}</span>
                {% else %}
                  -
                {% endif %}
              </td>
              <td>
                {% if user.pool_vehicle_code %}
                  {{ user.pool_vehicle_code }}<br>
                  <span class="muted">seit {{ user.pool_vehicle_assigned_at }}</span>
                {% else %}
                  -
                {% endif %}
              </td>
              <td><a class="btn btn-sm btn-outline-secondary" href="{{ url_for('edit_user', user_id=user.id) }}"><i class="ti ti-edit"></i></a></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <div class="card-body"><p class="mb-0">Keine passenden User gefunden.</p></div>
    {% endif %}
    </div>
  </section>

  <section class="card mb-4">
    <div class="card-header">
      <h2 class="card-title"><i class="ti ti-history me-1"></i>Letzte Bewegungen</h2>
    </div>
    <div class="table-responsive table-wrap card-table-shell">
    {% if transactions %}
      <table class="table table-vcenter card-table">
        <thead>
          <tr>
            <th>Zeitpunkt</th>
            <th>User</th>
            <th>Typ</th>
            <th>Kennung</th>
            <th>Bearbeiter</th>
            <th>Aktion</th>
            <th>Beleg</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in transactions %}
            <tr>
              <td>{{ entry.created_at }}</td>
              <td>{{ entry.full_name }}</td>
              <td>{{ asset_labels[entry.asset_type] }}</td>
              <td>{{ entry.asset_code }}</td>
              <td>{{ entry.handled_by or "-" }}</td>
              <td>{{ action_labels[entry.action] }}</td>
              <td><a class="btn btn-sm btn-outline-secondary" href="{{ url_for('print_transaction', transaction_id=entry.id) }}"><i class="ti ti-printer me-1"></i>Druck</a></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <div class="card-body"><p class="mb-0">Noch keine Bewegungen erfasst.</p></div>
    {% endif %}
    </div>
  </section>

  {% if g.current_staff and g.current_staff.role == 'admin' %}
    <section class="card">
      <div class="card-header">
        <h2 class="card-title"><i class="ti ti-file-text me-1"></i>Letzte Logeintraege</h2>
      </div>
      <div class="table-responsive table-wrap card-table-shell">
      {% if recent_logs %}
        <table class="table table-vcenter card-table">
          <thead>
            <tr>
              <th>Eintrag</th>
            </tr>
          </thead>
          <tbody>
            {% for line in recent_logs %}
              <tr>
                <td><code>{{ line }}</code></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <div class="card-body"><p class="mb-0">Noch keine Logeintraege vorhanden.</p></div>
      {% endif %}
      </div>
    </section>
  {% endif %}
{% endblock %}