{% extends "base.html" %}

{% block title %}Lizenzübersicht{% endblock %}

{% block extra_css %}
<style>
    .status-aktiv { color: #28a745; }
    .status-ablaufend { color: #ffc107; }
    .status-abgelaufen { color: #dc3545; }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Lizenzübersicht</h2>
        <div>
            <a href="/" class="btn btn-secondary">📊 Dashboard</a>
            <a href="/create" class="btn btn-primary">➕ Neue Lizenz</a>
            <a href="/batch" class="btn btn-primary">🔑 Batch-Lizenzen</a>
            <div class="btn-group">
                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    📥 Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/export/licenses?format=excel">📊 Excel (.xlsx)</a></li>
                    <li><a class="dropdown-item" href="/export/licenses?format=csv">📄 CSV (.csv)</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Such- und Filterformular -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="get" action="/licenses" id="filterForm">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="search" class="form-label">🔍 Suchen</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               placeholder="Lizenzschlüssel, Kunde, E-Mail..." 
                               value="{{ search }}">
                    </div>
                    <div class="col-md-2">
                        <label for="type" class="form-label">Typ</label>
                        <select class="form-select" id="type" name="type">
                            <option value="">Alle Typen</option>
                            <option value="full" {% if filter_type == 'full' %}selected{% endif %}>Vollversion</option>
                            <option value="test" {% if filter_type == 'test' %}selected{% endif %}>Testversion</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">Alle Status</option>
                            <option value="active" {% if filter_status == 'active' %}selected{% endif %}>✅ Aktiv</option>
                            <option value="expiring" {% if filter_status == 'expiring' %}selected{% endif %}>⏰ Läuft bald ab</option>
                            <option value="expired" {% if filter_status == 'expired' %}selected{% endif %}>⚠️ Abgelaufen</option>
                            <option value="inactive" {% if filter_status == 'inactive' %}selected{% endif %}>❌ Deaktiviert</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary">Filter anwenden</button>
                        <a href="/licenses" class="btn btn-outline-secondary">Zurücksetzen</a>
                    </div>
                </div>
            </form>
            {% if search or filter_type or filter_status %}
            <div class="mt-2">
                <small class="text-muted">
                    Gefiltert: {{ total }} Ergebnisse
                    {% if search %} | Suche: <strong>{{ search }}</strong>{% endif %}
                    {% if filter_type %} | Typ: <strong>{{ 'Vollversion' if filter_type == 'full' else 'Testversion' }}</strong>{% endif %}
                    {% if filter_status %} | Status: <strong>{{ filter_status }}</strong>{% endif %}
                </small>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Lizenzschlüssel</th>
                            <th>Kunde</th>
                            <th>E-Mail</th>
                            <th>Typ</th>
                            <th>Gültig von</th>
                            <th>Gültig bis</th>
                            <th>Status</th>
                            <th>Aktiv</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for license in licenses %}
                        <tr>
                            <td>{{ license[0] }}</td>
                            <td><code>{{ license[1] }}</code></td>
                            <td>{{ license[2] }}</td>
                            <td>{{ license[3] or '-' }}</td>
                            <td>
                                {% if license[4] == 'full' %}
                                    <span class="badge bg-success">Vollversion</span>
                                {% else %}
                                    <span class="badge bg-warning">Testversion</span>
                                {% endif %}
                            </td>
                            <td>{{ license[5].strftime('%d.%m.%Y') }}</td>
                            <td>{{ license[6].strftime('%d.%m.%Y') }}</td>
                            <td>
                                {% if license[8] == 'abgelaufen' %}
                                    <span class="status-abgelaufen">⚠️ Abgelaufen</span>
                                {% elif license[8] == 'läuft bald ab' %}
                                    <span class="status-ablaufend">⏰ Läuft bald ab</span>
                                {% else %}
                                    <span class="status-aktiv">✅ Aktiv</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if license[7] %}
                                    <span class="text-success">✓</span>
                                {% else %}
                                    <span class="text-danger">✗</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="/license/edit/{{ license[0] }}" class="btn btn-outline-primary">✏️ Bearbeiten</a>
                                    <form method="post" action="/license/delete/{{ license[0] }}" style="display: inline;" onsubmit="return confirm('Wirklich löschen?');">
                                        <button type="submit" class="btn btn-outline-danger">🗑️ Löschen</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                {% if not licenses %}
                <div class="text-center py-5">
                    {% if search %}
                    <p class="text-muted">Keine Lizenzen gefunden für: <strong>{{ search }}</strong></p>
                    <a href="/licenses" class="btn btn-secondary">Alle Lizenzen anzeigen</a>
                    {% else %}
                    <p class="text-muted">Noch keine Lizenzen vorhanden.</p>
                    <a href="/create" class="btn btn-primary">Erste Lizenz erstellen</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            
            <!-- Pagination -->
            {% if total_pages > 1 %}
            <nav aria-label="Seitennavigation" class="mt-3">
                <ul class="pagination justify-content-center">
                    <!-- Erste Seite -->
                    <li class="page-item {% if page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('licenses', page=1, search=search, type=filter_type, status=filter_status) }}">Erste</a>
                    </li>
                    
                    <!-- Vorherige Seite -->
                    <li class="page-item {% if page == 1 %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('licenses', page=page-1, search=search, type=filter_type, status=filter_status) }}">←</a>
                    </li>
                    
                    <!-- Seitenzahlen -->
                    {% for p in range(1, total_pages + 1) %}
                        {% if p >= page - 2 and p <= page + 2 %}
                        <li class="page-item {% if p == page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('licenses', page=p, search=search, type=filter_type, status=filter_status) }}">{{ p }}</a>
                        </li>
                        {% endif %}
                    {% endfor %}
                    
                    <!-- Nächste Seite -->
                    <li class="page-item {% if page == total_pages %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('licenses', page=page+1, search=search, type=filter_type, status=filter_status) }}">→</a>
                    </li>
                    
                    <!-- Letzte Seite -->
                    <li class="page-item {% if page == total_pages %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('licenses', page=total_pages, search=search, type=filter_type, status=filter_status) }}">Letzte</a>
                    </li>
                </ul>
                <p class="text-center text-muted">
                    Seite {{ page }} von {{ total_pages }} | Gesamt: {{ total }} Lizenzen
                </p>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}