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

{% block title %}Karte - Datalogger Dashboard{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('vendor/leaflet/leaflet.css') }}">
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <span>Karte</span>
    </div>
    <h1><i class="fas fa-map-marked-alt"></i> Trailer Standorte</h1>
</div>

<div class="map-controls">
    <div class="map-filter">
        <button class="filter-btn active" data-filter="all">
            <i class="fas fa-list"></i> Alle
        </button>
        <button class="filter-btn" data-filter="online">
            <i class="fas fa-check-circle"></i> Online
        </button>
        <button class="filter-btn" data-filter="offline">
            <i class="fas fa-times-circle"></i> Offline
        </button>
        <button class="filter-btn" data-filter="gps">
            <i class="fas fa-map-marker-alt"></i> Mit GPS
        </button>
    </div>
    <div class="map-search">
        <i class="fas fa-search"></i>
        <input type="text" id="datalogger-search" placeholder="Trailer suchen...">
    </div>
</div>

<div class="map-status-cards">
    <div class="map-status-card">
        <span class="map-status-value" id="total-count">{{ dataloggerPositions|length }}</span>
        <span class="map-status-label">Gesamt</span>
    </div>
    <div class="map-status-card">
        <span class="map-status-value" id="online-count">0</span>
        <span class="map-status-label">Online</span>
    </div>
    <div class="map-status-card">
        <span class="map-status-value" id="gps-count">0</span>
        <span class="map-status-label">Mit GPS</span>
    </div>
</div>

<div class="map-info-panel">
    <div class="panel-header">
        <h3><i class="fas fa-server"></i> Trailer Übersicht</h3>
    </div>
    <div class="datalogger-list" id="datalogger-list">
        {% for item in dataloggerPositions %}
        {% set colorIndex = (item.datalogger.id - 1) % 20 %}
        {% set colors = ['#2563eb', '#dc2626', '#16a34a', '#ca8a04', '#9333ea', '#ea580c', '#0891b2', '#be123c', '#059669', '#7c3aed', '#c2410c', '#0d9488', '#be185d', '#1e40af', '#166534', '#a16207', '#6b21a8', '#9f1239', '#0f766e', '#5b21b6'] %}
        {% set dataloggerColor = colors[colorIndex] %}
        {% set statusClass = 'offline' %}
        {% set statusText = 'Offline' %}
        {% set statusIcon = 'times-circle' %}
        {% if item.apiAvailable and item.position %}
            {% set statusClass = 'online' %}
            {% set statusText = 'Online mit GPS' %}
            {% set statusIcon = 'check-circle' %}
        {% elseif item.apiAvailable %}
            {% set statusClass = 'no-gps' %}
            {% set statusText = 'Online ohne GPS' %}
            {% set statusIcon = 'exclamation-triangle' %}
        {% endif %}
        <div class="datalogger-card" 
             data-datalogger-id="{{ item.datalogger.id }}" 
             data-datalogger-color="{{ dataloggerColor }}"
             data-status="{{ statusClass }}"
             data-has-gps="{% if item.position %}true{% else %}false{% endif %}"
             data-name="{{ item.datalogger.name|lower }}">
            <div class="datalogger-card-header">
                <span class="datalogger-color-indicator" style="background-color: {{ dataloggerColor }};"></span>
                <span class="datalogger-card-titles">
                    <span class="datalogger-card-label">{% if item.datalogger.location %}{{ item.datalogger.location }}{% elseif item.datalogger.description is defined and item.datalogger.description %}{{ item.datalogger.description }}{% else %}{{ item.datalogger.name }}{% endif %}</span>
                    <span class="datalogger-card-desc">{{ item.datalogger.name }}</span>
                </span>
                <span class="datalogger-status-badge {{ statusClass }}">
                    <i class="fas fa-{{ statusIcon }}"></i>
                    {{ statusText }}
                </span>
            </div>
            <div class="datalogger-info">
                {% if item.datalogger.location %}
                <div class="datalogger-info-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>{{ item.datalogger.location }}</span>
                </div>
                {% endif %}
                {% if item.position %}
                <div class="datalogger-info-item">
                    <i class="fas fa-satellite"></i>
                    <span>GPS aktiv</span>
                </div>
                {% endif %}
                {% if item.datalogger.apiBaseUrl %}
                <div class="datalogger-info-item">
                    <i class="fas fa-link"></i>
                    {% set apiUrlFull = (item.datalogger.apiBaseUrl starts with 'http') ? item.datalogger.apiBaseUrl : ('http://' ~ item.datalogger.apiBaseUrl) %}
                    <a href="{{ apiUrlFull }}" target="_blank" rel="noopener noreferrer" class="link-modern text-xs font-mono">{{ item.datalogger.apiBaseUrl|replace({'http://': '', 'https://': ''})|slice(0, 30) }}...</a>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="content-card">
    <div class="map-container-wrapper">
        <!-- Overlay für Datalogger-Details -->
        <div id="mapOverlay" class="map-overlay">
            <div class="map-overlay-header">
                <h3 id="overlayTitle">Datalogger Details</h3>
                <button class="map-overlay-close" id="overlayClose">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="map-overlay-content" id="overlayContent">
                <div class="overlay-loading">
                    <i class="fas fa-spinner fa-spin"></i> Lade Daten...
                </div>
            </div>
        </div>
        <div id="map" class="map-container"></div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
window.APP_MAP = {
    dataloggerPositions: {{ dataloggerPositions|json_encode|raw }},
    basePath: {{ app.request.getBasePath()|json_encode|raw }}
};
</script>
<script src="{{ asset('vendor/leaflet/leaflet.js') }}"></script>
<script src="{{ asset('js/map.js') }}"></script>
{% endblock %}