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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.bookings') }}" class="text-info">Buchungen</a></li>
                <li class="breadcrumb-item active">Synchronisieren</li>
            </ol>
        </nav>
        <h1><i class="bi bi-arrow-repeat me-2"></i>Buchungen synchronisieren</h1>
    </div>
    <a href="{{ url_for('admin.bookings') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Zurueck
    </a>
</div>

<!-- Status Info -->
<div class="row g-4 mb-4">
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-info-circle me-2"></i>Sync-Status
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted">Buchungen im Portal</td>
                        <td><strong>{{ total_bookings }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Kunden gesamt</td>
                        <td><strong>{{ customers|length }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Letzter Sync</td>
                        <td>
                            {% if last_sync_time %}
                            {{ last_sync_time.strftime('%d.%m.%Y um %H:%M') }}
                            {% else %}
                            <span class="text-muted">Noch nie synchronisiert</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-question-circle me-2"></i>Hinweis
            </div>
            <div class="card-body">
                <p class="mb-2">Die Synchronisation ruft alle Buchungen aus WordPress ab und speichert sie im Portal.</p>
                <ul class="mb-0 small text-muted">
                    <li>Neue Buchungen werden erstellt</li>
                    <li>Bestehende Buchungen werden aktualisiert</li>
                    <li>Buchungen werden per E-Mail zugeordnet</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Sync Forms -->
<div class="row g-4">
    <!-- Einzelnen Kunden synchronisieren -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header bg-info bg-opacity-10">
                <i class="bi bi-person me-2"></i>Einzelnen Kunden synchronisieren
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label class="form-label">Kunde auswaehlen</label>
                        <select name="customer_id" class="form-select bg-dark border-secondary text-light" required>
                            <option value="">-- Kunde waehlen --</option>
                            {% for customer in customers %}
                            <option value="{{ customer.id }}">
                                {{ customer.display_name }} ({{ customer.email }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-info">
                        <i class="bi bi-arrow-repeat me-1"></i>Kunden synchronisieren
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Alle Kunden synchronisieren -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header bg-primary bg-opacity-10">
                <i class="bi bi-people me-2"></i>Alle Kunden synchronisieren
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">
                    Synchronisiert die Buchungen aller {{ customers|length }} Kunden aus WordPress.
                </p>
                <div class="alert alert-warning mb-3">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <strong>Achtung:</strong> Dies kann bei vielen Kunden einige Zeit dauern.
                </div>
                <form method="POST">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-arrow-repeat me-1"></i>Alle synchronisieren
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- WordPress-Konfiguration pruefen -->
<div class="card mt-4">
    <div class="card-header">
        <i class="bi bi-gear me-2"></i>WordPress-Verbindung
    </div>
    <div class="card-body">
        <p class="mb-2">Die Synchronisation nutzt die WordPress REST API unter:</p>
        <code class="d-block p-2 bg-dark rounded mb-3">GET /wp-json/kurs-booking/v1/bookings?email=...</code>
        <a href="{{ url_for('admin.settings_wordpress') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-gear me-1"></i>WordPress-Einstellungen pruefen
        </a>
    </div>
</div>
{% endblock %}