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

{% block title %}Wasserdaten-Vergleich Details{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .comparison-table {
        font-size: 0.9rem;
    }

    .comparison-table thead th {
        background: linear-gradient(135deg, #003d5c 0%, #005580 100%);
        color: white;
        font-weight: 600;
        border: none;
        padding: 1rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .comparison-table tbody tr:hover {
        background: #f8f9fc;
    }

    .value-cell {
        text-align: center;
        font-weight: 600;
    }

    .deviation-good {
        color: #28a745;
    }

    .deviation-warning {
        color: #ffc107;
    }

    .deviation-bad {
        color: #dc3545;
    }

    .match-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .match-yes {
        background: #d4edda;
        color: #155724;
    }

    .match-no {
        background: #f8d7da;
        color: #721c24;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0"><i class="fas fa-table me-2"></i>Daten-Vergleich Details</h1>
            <p class="text-muted mb-0">{{ location ?: 'Alle Standorte' }} • letzte {{ days_back }} Tage</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('admin_water_comparison_index') }}?location={{ location }}&days={{ days_back }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Zur Übersicht
            </a>
        </div>
    </div>
    <!-- Zurück Button -->
    <div class="mb-3">
        <a href="{{ path('admin_water_comparison_index') }}?location={{ location }}&days={{ days_back }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Zurück zur Übersicht
        </a>
    </div>

    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Gesamt Messungen</h6>
                    <h2 class="text-primary">{{ statistics.total_lilian_measurements }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Mit Match</h6>
                    <h2 class="text-success">{{ statistics.measurements_with_influx }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Ohne Match</h6>
                    <h2 class="text-warning">{{ statistics.measurements_without_influx }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Ø Zeitdifferenz</h6>
                    <h2 class="text-info">{{ statistics.average_time_diff }}s</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailtabelle -->
    <div class="card">
        <div class="card-header bg-white py-3">
            <h5 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table"></i> Detaillierter Vergleich
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table comparison-table mb-0">
                    <thead>
                        <tr>
                            <th>Zeitpunkt</th>
                            <th>Standort</th>
                            <th>Match</th>
                            <th>pH (Lilian)</th>
                            <th>pH (Influx)</th>
                            <th>Δ pH</th>
                            <th>Cl frei (Lilian)</th>
                            <th>Cl frei (Influx)</th>
                            <th>Δ Cl</th>
                            <th>Zeitdifferenz</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in comparison %}
                            <tr>
                                <td>{{ item.timestamp|date('d.m.Y H:i') }}</td>
                                <td>{{ item.location }}</td>
                                <td>
                                    {% if item.has_both %}
                                        <span class="match-badge match-yes">Ja</span>
                                    {% else %}
                                        <span class="match-badge match-no">Nein</span>
                                    {% endif %}
                                </td>
                                
                                <!-- pH Lilian -->
                                <td class="value-cell">
                                    {{ item.lilian.ph ?? '-' }}
                                </td>
                                
                                <!-- pH Influx -->
                                <td class="value-cell">
                                    {{ item.influx.ph|default('-') }}
                                </td>
                                
                                <!-- pH Differenz -->
                                <td class="value-cell">
                                    {% if item.deviations.ph is defined %}
                                        {% set dev = item.deviations.ph %}
                                        <span class="{{ dev.within_tolerance ? 'deviation-good' : 'deviation-warning' }}">
                                            {{ dev.difference > 0 ? '+' : '' }}{{ dev.difference }}
                                        </span>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                
                                <!-- Chlor Lilian -->
                                <td class="value-cell">
                                    {{ item.lilian.chlorine_free ?? '-' }}
                                </td>
                                
                                <!-- Chlor Influx -->
                                <td class="value-cell">
                                    {{ item.influx.chlorine_free|default('-') }}
                                </td>
                                
                                <!-- Chlor Differenz -->
                                <td class="value-cell">
                                    {% if item.deviations.chlorine_free is defined %}
                                        {% set dev = item.deviations.chlorine_free %}
                                        <span class="{{ dev.within_tolerance ? 'deviation-good' : 'deviation-warning' }}">
                                            {{ dev.difference > 0 ? '+' : '' }}{{ dev.difference }}
                                        </span>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                
                                <!-- Zeitdifferenz -->
                                <td class="text-center">
                                    {% if item.time_diff_seconds %}
                                        {{ item.time_diff_seconds }}s
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Legende -->
    <div class="card mt-3">
        <div class="card-body">
            <h6 class="font-weight-bold">Legende:</h6>
            <ul class="mb-0">
                <li><strong class="deviation-good">Grün:</strong> Abweichung innerhalb der Toleranz</li>
                <li><strong class="deviation-warning">Gelb/Orange:</strong> Abweichung außerhalb der Toleranz</li>
                <li><strong>Lilian:</strong> Manuelle Messungen von Lilian Labs</li>
                <li><strong>Influx:</strong> Automatische Messungen aus InfluxDB</li>
                <li><strong>Δ:</strong> Differenz zwischen beiden Werten</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}