{% extends "admin/base.html" %}
{% block title %}Kunden{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1><i class="bi bi-people me-2"></i>Kunden</h1>
        <p class="text-muted mb-0">{{ customers|length }} Kunden{% if search %} gefunden fuer "{{ search }}"{% endif %}</p>
    </div>
    <div class="btn-group">
        <a href="{{ url_for('admin.customers_export') }}" class="btn btn-outline-success">
            <i class="bi bi-download me-1"></i>CSV Export
        </a>
        <a href="{{ url_for('admin.customers_import') }}" class="btn btn-outline-info">
            <i class="bi bi-upload me-1"></i>CSV Import
        </a>
    </div>
</div>

<!-- Suchfeld -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ url_for('admin.customers') }}" class="row g-3">
            <div class="col-md-8">
                <div class="input-group">
                    <span class="input-group-text bg-dark border-secondary">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" name="search" class="form-control bg-dark border-secondary text-light"
                           placeholder="Name, E-Mail oder Telefon suchen..."
                           value="{{ search or '' }}">
                </div>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="bi bi-search me-1"></i>Suchen
                </button>
                {% if search %}
                <a href="{{ url_for('admin.customers') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-lg me-1"></i>Filter loeschen
                </a>
                {% endif %}
            </div>
        </form>
    </div>
</div>

<!-- Kundentabelle -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>E-Mail</th>
                        <th>Telefon</th>
                        <th>Registriert</th>
                        <th>Letzter Login</th>
                        <th class="text-end">Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                        <td>
                            <a href="{{ url_for('admin.customer_detail', customer_id=customer.id) }}"
                               class="text-light text-decoration-none fw-medium">
                                {{ customer.display_name }}
                            </a>
                        </td>
                        <td>
                            <a href="mailto:{{ customer.email }}" class="text-info text-decoration-none">
                                {{ customer.email }}
                            </a>
                        </td>
                        <td>{{ customer.display_phone or '-' }}</td>
                        <td>{{ customer.created_at.strftime('%d.%m.%Y') if customer.created_at else '-' }}</td>
                        <td>
                            {% if customer.last_login_at %}
                            {{ customer.last_login_at.strftime('%d.%m.%Y %H:%M') }}
                            {% else %}
                            <span class="text-muted">Noch nie</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('admin.customer_detail', customer_id=customer.id) }}"
                                   class="btn btn-outline-info" title="Details">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ url_for('admin.customer_edit', customer_id=customer.id) }}"
                                   class="btn btn-outline-warning" title="Bearbeiten">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <button type="button" class="btn btn-outline-danger" title="Loeschen"
                                        data-bs-toggle="modal" data-bs-target="#deleteModal{{ customer.id }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>

                            <!-- Delete Modal -->
                            <div class="modal fade" id="deleteModal{{ customer.id }}" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content bg-dark">
                                        <div class="modal-header border-secondary">
                                            <h5 class="modal-title">Kunde loeschen</h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body text-start">
                                            <p>Moechten Sie diesen Kunden wirklich loeschen?</p>
                                            <p class="mb-0">
                                                <strong>{{ customer.display_name }}</strong><br>
                                                <span class="text-muted">{{ customer.email }}</span>
                                            </p>
                                            <div class="alert alert-danger mt-3 mb-0">
                                                <i class="bi bi-exclamation-triangle me-2"></i>
                                                Diese Aktion kann nicht rueckgaengig gemacht werden!
                                            </div>
                                        </div>
                                        <div class="modal-footer border-secondary">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                                            <form method="POST" action="{{ url_for('admin.customer_delete', customer_id=customer.id) }}" class="d-inline">
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="bi bi-trash me-1"></i>Loeschen
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            {% if search %}
                            Keine Kunden fuer "{{ search }}" gefunden
                            {% else %}
                            Keine Kunden registriert
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if customers|length > 20 %}
<div class="mt-3 text-muted small">
    <i class="bi bi-info-circle me-1"></i>
    Zeige {{ customers|length }} Kunden. Nutzen Sie die Suche, um die Liste zu filtern.
</div>
{% endif %}
{% endblock %}