{% extends "admin/base.html" %}
{% block title %}Buchung: {{ booking.booking_number }}{% 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">{{ booking.booking_number or 'Details' }}</li>
            </ol>
        </nav>
        <h1><i class="bi bi-calendar-check me-2"></i>{{ booking.booking_number or 'Buchung #' ~ booking.id }}</h1>
    </div>
    <div>
        <span class="badge bg-{{ booking.status_color }} fs-6 me-2">{{ booking.status_display }}</span>
        <a href="{{ url_for('admin.bookings') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Zurueck
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Buchungsdetails -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-info-circle me-2"></i>Buchungsdetails
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 140px;">Buchungsnummer</td>
                        <td><strong>{{ booking.booking_number or '-' }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">WordPress ID</td>
                        <td>#{{ booking.wp_booking_id }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Status</td>
                        <td><span class="badge bg-{{ booking.status_color }}">{{ booking.status_display }}</span></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Gesamtpreis</td>
                        <td><strong>{{ booking.formatted_price }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Ticket-Typ</td>
                        <td>{{ booking.ticket_type or '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Anzahl</td>
                        <td>{{ booking.ticket_count or 1 }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Kunde -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-person me-2"></i>Kunde
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 140px;">Name</td>
                        <td>
                            <a href="{{ url_for('admin.customer_detail', customer_id=booking.customer_id) }}" class="text-info">
                                {{ booking.customer.display_name }}
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">E-Mail</td>
                        <td>
                            <a href="mailto:{{ booking.customer.email }}" class="text-info">{{ booking.customer.email }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">Telefon</td>
                        <td>{{ booking.customer_phone or booking.customer.display_phone or '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Name bei Buchung</td>
                        <td>{{ booking.customer_name or '-' }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Kurs-Informationen -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-mortarboard me-2"></i>Kurs
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 140px;">Titel</td>
                        <td><strong>{{ booking.kurs_title or '-' }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">WordPress Kurs-ID</td>
                        <td>#{{ booking.wp_kurs_id or '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Datum</td>
                        <td>{{ booking.formatted_date }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Uhrzeit</td>
                        <td>{{ booking.formatted_time }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Ort</td>
                        <td>{{ booking.kurs_location or '-' }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- sevDesk Integration -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-receipt me-2"></i>sevDesk Rechnung
            </div>
            <div class="card-body">
                {% if booking.sevdesk_invoice_id %}
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 140px;">Rechnungsnummer</td>
                        <td><strong>{{ booking.sevdesk_invoice_number or '-' }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">sevDesk ID</td>
                        <td>#{{ booking.sevdesk_invoice_id }}</td>
                    </tr>
                </table>
                {% else %}
                <p class="text-muted mb-0">Keine Rechnung verknuepft.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Timestamps -->
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-clock me-2"></i>Zeitstempel
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 160px;">Erstellt (WordPress)</td>
                        <td>{{ booking.wp_created_at.strftime('%d.%m.%Y um %H:%M') if booking.wp_created_at else '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Importiert</td>
                        <td>{{ booking.created_at.strftime('%d.%m.%Y um %H:%M') if booking.created_at else '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Letzter Sync</td>
                        <td>{{ booking.synced_at.strftime('%d.%m.%Y um %H:%M') if booking.synced_at else '-' }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Custom Fields -->
    {% if booking.custom_fields %}
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-list-ul me-2"></i>Zusatzfelder
            </div>
            <div class="card-body">
                <table class="table table-dark table-borderless table-sm mb-0">
                    {% for key, value in booking.custom_fields.items() %}
                    <tr>
                        <td class="text-muted" style="width: 280px; white-space: nowrap;">{{ key }}</td>
                        <td>{{ value }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}