{% extends 'admin_base.html.twig' %}

{% block title %}{{ course.name }} - Absagen{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-ban me-2"></i>
                        Absagen - {{ course.name }}
                    </h1>
                    <p class="text-muted mb-0">Übersicht aller abgesagten Buchungen für diesen Kurs</p>
                </div>
                <div>
                    <a href="{{ path('courses_details', {'id': course.id}) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zu Details
                    </a>
                </div>
            </div>

            <!-- Kompakte Statistiken -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <div class="stat-card bg-danger">
                        <div class="stat-number">{{ cancelledAppointments|length }}</div>
                        <div class="stat-label">Vollständig abgesagt</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="stat-card bg-info">
                        <div class="stat-number">{{ partialCancellations|length }}</div>
                        <div class="stat-label">Teilabmeldungen</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card bg-success">
                        <div class="stat-number">{{ course.name }}</div>
                        <div class="stat-label">Kurs</div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="stat-card bg-warning">
                        <div class="stat-number">
                            {% if course.location %}
                                {{ course.location.name }}
                            {% else %}
                                N/A
                            {% endif %}
                        </div>
                        <div class="stat-label">Standort</div>
                    </div>
                </div>
            </div>

            <!-- Teilabmeldungen -->
            {% if partialCancellations|length > 0 %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-calendar-times me-2"></i>
                            Teilabmeldungen ({{ partialCancellations|length }})
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Teilnehmer</th>
                                        <th>Buchungsnummer</th>
                                        <th>Abgemeldete Tage</th>
                                        <th>Buchungsdatum</th>
                                        <th>Grund</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for appointment in partialCancellations %}
                                        {% set customer = appointment.customer %}
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-sm bg-primary text-white me-2">
                                                        {{ customer.firstName|first }}{{ customer.lastName|first }}
                                                    </div>
                                                    <div>
                                                        <strong>{{ customer.firstName }} {{ customer.lastName }}</strong>
                                                        <br><small class="text-muted">{{ customer.email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <code class="small">{{ appointment.bookingToken|slice(0, 12) }}...</code>
                                            </td>
                                            <td>
                                                {% for day in appointment.cancelledDays %}
                                                    <span class="badge bg-warning me-1">{{ day }}</span>
                                                {% endfor %}
                                            </td>
                                            <td>{{ appointment.createdAt|date('d.m.Y H:i') }}</td>
                                            <td>
                                                {% if appointment.notes %}
                                                    <button class="btn btn-outline-primary btn-sm" type="button" 
                                                            data-bs-toggle="collapse" 
                                                            data-bs-target="#reason-{{ appointment.id }}" 
                                                            aria-expanded="false">
                                                        <i class="fas fa-eye me-1"></i>Anzeigen
                                                    </button>
                                                    <div class="collapse mt-2" id="reason-{{ appointment.id }}">
                                                        <div class="alert alert-light">
                                                            <small>{{ appointment.notes }}</small>
                                                        </div>
                                                    </div>
                                                {% else %}
                                                    <span class="text-muted small">Keine Notizen</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Vollständige Absagen -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>
                        Vollständig abgesagte Buchungen
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Buchungsnummer</th>
                                    <th>Name</th>
                                    <th>E-Mail</th>
                                    <th>Telefon</th>
                                    <th>Buchungsdatum</th>
                                    <th>Abmeldungsdatum</th>
                                    <th>Grund</th>
                                    <th>Notizen</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for appointment in cancelledAppointments %}
                                    {% set customer = appointment.customer %}
                                    <tr>
                                        <td>
                                            <code>{{ appointment.bookingToken }}</code>
                                        </td>
                                        <td>
                                            <strong>{{ customer.firstName }} {{ customer.lastName }}</strong>
                                        </td>
                                        <td>
                                            <a href="mailto:{{ customer.email }}">{{ customer.email }}</a>
                                        </td>
                                        <td>
                                            {% if customer.phone %}
                                                <a href="tel:{{ customer.phone }}">{{ customer.phone }}</a>
                                            {% else %}
                                                <span class="text-muted">Nicht angegeben</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ appointment.createdAt|date('d.m.Y H:i') }}</td>
                                        <td>
                                            {% if appointment.updatedAt %}
                                                {{ appointment.updatedAt|date('d.m.Y H:i') }}
                                            {% else %}
                                                <span class="text-muted">Unbekannt</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-danger">Abgesagt</span>
                                        </td>
                                        <td>
                                            {% if appointment.notes %}
                                                <span class="text-muted" title="{{ appointment.notes }}">
                                                    {{ appointment.notes|slice(0, 100) }}{% if appointment.notes|length > 100 %}...{% endif %}
                                                </span>
                                            {% else %}
                                                <span class="text-muted">Keine Notizen</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="8" class="text-center py-4">
                                            <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                                            <h5 class="text-success">Keine Absagen</h5>
                                            <p class="text-muted">Für diesen Kurs sind keine abgesagten Buchungen vorhanden.</p>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Zusätzliche Informationen -->
            {% if cancelledAppointments|length > 0 %}
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-chart-bar me-2"></i>
                                    Absage-Statistiken
                                </h6>
                            </div>
                            <div class="card-body">
                                <p><strong>Gesamt abgesagt:</strong> {{ cancelledAppointments|length }}</p>
                                <p><strong>Kurs:</strong> {{ course.name }}</p>
                                {% if course.location %}
                                    <p><strong>Standort:</strong> {{ course.location.name }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Hinweise
                                </h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted mb-0">
                                    Diese Übersicht zeigt alle abgesagten Buchungen für den Kurs "{{ course.name }}". 
                                    Abgesagte Buchungen können nicht wiederhergestellt werden.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
/* Kompakte Statistik-Cards */
.stat-card {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Kleine Avatare */
.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

/* Moderne Tabelle */
.table th {
    border-top: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
}

.table td {
    vertical-align: middle;
    padding: 0.75rem;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

/* Collapse Animation */
.collapse .alert {
    margin: 0;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        font-size: 0.9rem;
    }
}
</style>
{% endblock %}