{% extends 'base.html.twig' %}
{% import 'components/datalogger_tabs.html.twig' as tabs %}

{% block title %}GPS Daten - Dashboard{% endblock %}


{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        {% if datalogger is defined %}
            <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}">{{ datalogger.name }}</a>
            <i class="fas fa-chevron-right"></i>
        {% endif %}
        <span>GPS</span>
    </div>
    <div class="page-title">
        <i class="fas fa-map-marker-alt"></i>
        <h2>GPS Daten{% if datalogger is defined %} - {{ datalogger.name }}{% endif %}</h2>
    </div>
</div>

<div class="gps-header-modern">
    <div>
        {% if not apiAvailable %}
        <div class="alert alert-warning mb-0">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Warnung:</strong> Datalogger API ist nicht erreichbar. Keine GPS-Daten verfügbar.
        </div>
        {% endif %}
    </div>
</div>

{% if datalogger is defined %}
{{ tabs.renderTabs(datalogger, app.request.attributes.get('_route')) }}
{% endif %}

<div class="content-grid">
    <div class="content-main">
        <!-- Current GPS -->
        {% if currentGps is not empty and currentGps.error is not defined %}
        <div class="gps-stats">
            {% if currentGps.lat is defined and currentGps.lat is not iterable %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ currentGps.lat|number_format(6) }}</span>
                <span class="gps-stat-label">Breitengrad</span>
            </div>
            {% endif %}
            {% if currentGps.lon is defined and currentGps.lon is not iterable %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ currentGps.lon|number_format(6) }}</span>
                <span class="gps-stat-label">Längengrad</span>
            </div>
            {% endif %}
            {% set speedVal = currentGps.speed_kmh is defined ? currentGps.speed_kmh : (currentGps.speed is defined ? currentGps.speed : null) %}
            {% if speedVal is not null and speedVal is not iterable and speedVal is not same as('') %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ speedVal }} km/h</span>
                <span class="gps-stat-label">Geschwindigkeit</span>
            </div>
            {% endif %}
            {% if currentGps.source is defined and currentGps.source %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ currentGps.source }}</span>
                <span class="gps-stat-label">Quelle</span>
            </div>
            {% endif %}
            {% if currentGps.altitude is defined and currentGps.altitude is not iterable and currentGps.altitude is not same as('') %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ currentGps.altitude }} m</span>
                <span class="gps-stat-label">Höhe</span>
            </div>
            {% endif %}
            {% if currentGps.satellites is defined and currentGps.satellites is not iterable and currentGps.satellites is not same as('') %}
            <div class="gps-stat-card">
                <span class="gps-stat-value">{{ currentGps.satellites }}</span>
                <span class="gps-stat-label">Satelliten</span>
            </div>
            {% endif %}
        </div>
        {% endif %}
        
        <div class="info-card-modern">
            <h3><i class="fas fa-map-marker-alt"></i> Aktueller GPS-Punkt</h3>
            <div class="card-body">
                {% if currentGps.error is defined %}
                    <div class="alert alert-error">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Fehler:</strong> {{ currentGps.error }}
                    </div>
                {% elseif currentGps is not empty %}
                    <div class="info-grid-modern">
                        {% if currentGps.lat is defined and currentGps.lat is not iterable and currentGps.lat is not same as('') %}
                        <div class="info-item">
                            <span class="info-label">Breitengrad</span>
                            <span class="info-value">{{ currentGps.lat }}</span>
                        </div>
                        {% endif %}
                        
                        {% if currentGps.lon is defined and currentGps.lon is not iterable and currentGps.lon is not same as('') %}
                        <div class="info-item">
                            <span class="info-label">Längengrad</span>
                            <span class="info-value">{{ currentGps.lon }}</span>
                        </div>
                        {% endif %}
                        
                        {% if currentGps.datetime is defined and currentGps.datetime is not iterable and currentGps.datetime is not same as('') %}
                        <div class="info-item-modern">
                            <span class="info-label-modern">Datum/Zeit</span>
                            <span class="info-value-modern">
                                <i class="fas fa-clock"></i>
                                {{ currentGps.datetime }}
                            </span>
                        </div>
                        {% elseif currentGps.timestamp is defined and currentGps.timestamp is not iterable and currentGps.timestamp is not same as('') %}
                        <div class="info-item-modern">
                            <span class="info-label-modern">Zeitstempel</span>
                            <span class="info-value-modern">
                                <i class="fas fa-clock"></i>
                                {{ currentGps.timestamp|round|date('d.m.Y H:i:s') }}
                            </span>
                        </div>
                        {% endif %}
                        
                        {% if currentGps.accuracy is defined and currentGps.accuracy is not iterable and currentGps.accuracy is not same as('') %}
                        <div class="info-item-modern">
                            <span class="info-label-modern">Genauigkeit</span>
                            <span class="info-value-modern">
                                <i class="fas fa-crosshairs"></i>
                                {{ currentGps.accuracy }} m
                            </span>
                        </div>
                        {% endif %}
                        {% if currentGps.source is defined and currentGps.source %}
                        <div class="info-item-modern">
                            <span class="info-label-modern">Positionsquelle</span>
                            <span class="info-value-modern">
                                <i class="fas fa-location-arrow"></i>
                                {{ currentGps.source }}
                            </span>
                        </div>
                        {% endif %}
                    </div>
                    
                    {% if currentGps.lat is defined and currentGps.lat is not iterable and currentGps.lon is defined and currentGps.lon is not iterable %}
                    <div class="section-divider">
                        <a href="https://www.google.com/maps?q={{ currentGps.lat }},{{ currentGps.lon }}" target="_blank" class="btn btn-primary">
                            <i class="fas fa-map"></i> Auf Karte anzeigen
                        </a>
                    </div>
                    {% endif %}
                {% else %}
                    <p class="text-muted">Keine GPS-Daten verfügbar</p>
                {% endif %}
            </div>
        </div>

        <!-- GPS Points List -->
        <div class="info-card-modern">
            <h3><i class="fas fa-list"></i> GPS-Punkte (letzte {{ hours }} Stunden, max. {{ limit }})</h3>
            <div class="card-body">
                {% if gpsPoints.error is defined %}
                    <div class="alert alert-error">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Fehler:</strong> {{ gpsPoints.error }}
                    </div>
                {% elseif gpsPoints is iterable %}
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Zeitstempel</th>
                                    <th>Breitengrad</th>
                                    <th>Längengrad</th>
                                    <th>Geschwindigkeit</th>
                                    <th>Quelle</th>
                                    <th>Genauigkeit</th>
                                    <th>Höhe</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if gpsPoints is iterable %}
                                    {% for point in gpsPoints|slice(0, 100) %}
                                    <tr>
                                        <td>
                                            {% if point.datetime is defined and point.datetime is not iterable %}
                                                {{ point.datetime }}
                                            {% elseif point.timestamp is defined and point.timestamp is not iterable %}
                                                {{ point.timestamp|round|date('d.m.Y H:i:s') }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>{% if point.lat is defined and point.lat is not iterable %}{{ point.lat }}{% else %}-{% endif %}</td>
                                        <td>{% if point.lon is defined and point.lon is not iterable %}{{ point.lon }}{% else %}-{% endif %}</td>
                                        {% set pointSpeed = point.speed_kmh is defined ? point.speed_kmh : (point.speed is defined ? point.speed : null) %}
                                        <td>{% if pointSpeed is not null and pointSpeed is not iterable %}{{ pointSpeed }} km/h{% else %}-{% endif %}</td>
                                        <td>{% if point.source is defined and point.source is not iterable %}{{ point.source }}{% else %}-{% endif %}</td>
                                        <td>
                                            {% if point.accuracy_m is defined and point.accuracy_m is not iterable %}
                                                {{ point.accuracy_m }} m
                                            {% elseif point.accuracy is defined and point.accuracy is not iterable %}
                                                {{ point.accuracy }} m
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>{% if point.altitude is defined and point.altitude is not iterable %}{{ point.altitude }} m{% else %}-{% endif %}</td>
                                        <td>
                                            {% if point.lat is defined and point.lat is not iterable and point.lon is defined and point.lon is not iterable %}
                                            <a href="https://www.google.com/maps?q={{ point.lat|e }},{{ point.lon|e }}" target="_blank" class="btn btn-sm">
                                                <i class="fas fa-map"></i>
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted">Keine GPS-Punkte verfügbar</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}