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

{% block title %}Angefahrene Stationen - {{ datalogger.name }}{% endblock %}

{% block stylesheets %}
<style>
.stations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.station-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s;
}

.station-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.station-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.station-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid var(--primary-color);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.deliveries-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.deliveries-table thead {
    background: #f9fafb;
}

.deliveries-table th {
    padding: 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.deliveries-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.deliveries-table tbody tr:hover {
    background: #f9fafb;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
</style>
{% endblock %}

{% block content %}
<div class="stations-header">
    <div>
        <h1><i class="fas fa-map-marked-alt"></i> Angefahrene Stationen</h1>
        <p class="stations-subtitle">{{ datalogger.name }}</p>
    </div>
    <div class="stations-actions">
        <a href="{{ path('app_delivery_plan') }}" class="btn btn-inline">
            <i class="fas fa-arrow-left"></i> Zurück zum Lieferplan
        </a>
        <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}" class="btn btn-inline">
            <i class="fas fa-server"></i> Datalogger-Details
        </a>
    </div>
</div>

{% if stationsData|length == 0 %}
    <div class="empty-state">
        <i class="fas fa-inbox"></i>
        <h3>Keine Stationen gefunden</h3>
        <p>Es wurden noch keine Entleerungen an Stationen erfasst.</p>
    </div>
{% else %}
    {% for location, data in stationsData %}
        <div class="station-card">
            <div class="station-header">
                <div class="station-name">
                    <i class="fas fa-map-marker-alt text-primary"></i>
                    {{ location }}
                </div>
                <div class="text-right">
                    <div class="station-stat-label">Lieferungen</div>
                    <div class="station-stat-value">{{ data.deliveryCount }}</div>
                </div>
            </div>

            <div class="station-stats">
                <div class="stat-item">
                    <div class="stat-label">Gesamtmenge</div>
                    <div class="stat-value">{{ data.totalQuantity|number_format(2, ',', '.') }} kg</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Ø Liefermenge</div>
                    <div class="stat-value">{{ data.averageQuantity|number_format(2, ',', '.') }} kg</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Erste Lieferung</div>
                    <div class="stat-value text-sm">{{ data.firstDelivery|date('d.m.Y') }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Letzte Lieferung</div>
                    <div class="stat-value text-sm">{{ data.lastDelivery|date('d.m.Y') }}</div>
                </div>
            </div>

            <h3 class="station-section-title">Lieferungen</h3>
            <div class="overflow-x-auto">
                <table class="deliveries-table">
                    <thead>
                        <tr>
                            <th>Datum</th>
                            <th>Lieferschein-Nr.</th>
                            <th class="text-right">Menge</th>
                            <th class="text-center">Status</th>
                            <th class="text-right">Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for emptying in data.emptyings %}
                            {% set deliveryNote = emptying.deliveryNote %}
                            <tr>
                                <td>{{ emptying.measuredAt|date('d.m.Y H:i') }}</td>
                                <td>
                                    {% if deliveryNote %}
                                        <strong>{{ deliveryNote.deliveryNoteNumber }}</strong>
                                    {% else %}
                                        <span class="text-secondary">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-right">
                                    <strong>{{ emptying.quantity|number_format(2, ',', '.') }} kg</strong>
                                </td>
                                <td class="text-center">
                                    {% if deliveryNote %}
                                        {% if deliveryNote.isFinalized %}
                                            <span class="status-badge status-finalized">Finalisiert</span>
                                        {% else %}
                                            <span class="status-badge status-draft">Entwurf</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-secondary">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-right">
                                    {% if deliveryNote %}
                                        <div class="action-links-row">
                                            <a href="{{ path('app_delivery_note_show', {id: deliveryNote.id}) }}" class="btn-small btn-view">
                                                <i class="fas fa-eye"></i> Anzeigen
                                            </a>
                                            <a href="{{ path('app_delivery_note_pdf', {id: deliveryNote.id}) }}" class="btn-small btn-pdf">
                                                <i class="fas fa-file-pdf"></i> PDF
                                            </a>
                                        </div>
                                    {% else %}
                                        <span class="text-secondary">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endfor %}
{% endif %}
{% endblock %}