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

{% block title %}SwimMonitor - Übersicht Schwimmcontainer{% endblock %}

{% block header %}
    <div class="container-header">
        <h1 class="display-4">Container Übersicht</h1>
        <div class="container-status">
            <span class="badge bg-primary">Aktive Container: {{ containers|length }}</span>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-map-marker-alt me-2"></i>Container Übersicht
{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{{ asset('css/overview.css') }}">
    <link rel="stylesheet" href="{{ asset('css/menu.css') }}">
    <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet">
    
    <style>
        :root {
            --card-bg: var(--bs-body-bg);
            --card-border: var(--bs-border-color);
            --text-color: var(--bs-body-color);
            --text-muted: var(--bs-secondary-color);
            --metric-bg: var(--bs-light);
            --modal-bg: var(--bs-body-bg);
            --modal-border: var(--bs-border-color);
        }

        .container-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            padding: 1rem;
        }

        .container-card {
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
            border: 1px solid var(--card-border);
        }

        .container-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: var(--metric-bg);
            padding: 1rem;
            border-bottom: 1px solid var(--card-border);
        }

        .card-body {
            padding: 1rem;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .metric-card {
            background: var(--metric-bg);
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            border: 2px solid transparent;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

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

        .metric-card.success {
            border-color: #28a745;
            background: rgba(40, 167, 69, 0.1);
        }

        .metric-card.warning {
            border-color: #ffc107;
            background: rgba(255, 193, 7, 0.1);
        }

        .metric-card.danger {
            border-color: #dc3545;
            background: rgba(220, 53, 69, 0.1);
        }

        .metric-card.secondary {
            border-color: #6c757d;
            background: rgba(108, 117, 125, 0.1);
        }

        .metric-value {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0.5rem 0;
            color: var(--text-color);
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .metric-status {
            min-height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .status-online {
            background: #d4edda;
            color: #155724;
        }

        .status-offline {
            background: #f8d7da;
            color: #721c24;
        }

        .search-container {
            margin-bottom: 2rem;
            padding: 1rem;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--card-border);
        }

        .search-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--card-border);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--card-bg);
            color: var(--text-color);
        }

        .map-container {
            margin-top: 2rem;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--card-border);
        }

        #map {
            height: 500px;
            width: 100%;
            border-radius: 12px;
        }

        .detail-button {
            width: 100%;
            padding: 0.5rem;
            background: var(--bs-primary);
            color: white;
            border: none;
            border-radius: 8px;
            margin-top: 1rem;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            line-height: 1.5;
        }

        .detail-button:hover {
            background: var(--bs-primary-dark, #0056b3);
            color: white;
            text-decoration: none;
            filter: brightness(0.9);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            position: relative;
            background: var(--modal-bg);
            margin: 10% auto;
            padding: 2rem;
            width: 90%;
            max-width: 600px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--modal-border);
        }

        .close-modal {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-muted);
        }

        .modal-section {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--card-border);
        }

        .modal-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .modal-title {
            color: var(--text-color);
            margin-bottom: 1rem;
        }

        .modal-value {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            padding: 0.5rem;
            background: var(--metric-bg);
            border-radius: 4px;
            color: var(--text-color);
        }

        .modal-value strong {
            color: var(--text-muted);
        }

        /* Dark mode specific adjustments */
        [data-bs-theme="dark"] {
            --card-bg: var(--bs-dark);
            --card-border: #444;
            --text-color: #fff;
            --text-muted: #aaa;
            --metric-bg: #2a2a2a;
            --modal-bg: var(--bs-dark);
            --modal-border: #444;
        }

        [data-bs-theme="dark"] .metric-card.success {
            background: rgba(40, 167, 69, 0.2);
        }

        [data-bs-theme="dark"] .metric-card.warning {
            background: rgba(255, 193, 7, 0.2);
        }

        [data-bs-theme="dark"] .metric-card.danger {
            background: rgba(220, 53, 69, 0.2);
        }

        [data-bs-theme="dark"] .metric-card.secondary {
            background: rgba(108, 117, 125, 0.2);
        }

        [data-bs-theme="dark"] .detail-button:hover {
            filter: brightness(1.1);
        }

        .leaflet-container {
            background: var(--card-bg) !important;
        }

        .leaflet-popup-content-wrapper {
            background: var(--card-bg);
            color: var(--text-color);
        }

        .leaflet-popup-tip {
            background: var(--card-bg);
        }

        .leaflet-control-zoom a {
            background-color: var(--card-bg) !important;
            color: var(--text-color) !important;
            border-color: var(--card-border) !important;
        }

        .leaflet-control-zoom a:hover {
            background-color: var(--metric-bg) !important;
        }

        .leaflet-control-attribution {
            background: var(--card-bg) !important;
            color: var(--text-muted) !important;
        }

        .leaflet-control-attribution a {
            color: var(--bs-primary) !important;
        }
    </style>
    
    <div class="container-fluid">
        <div class="search-container">
            <input type="text" class="search-input" id="searchInput" placeholder="Suche nach Container...">
        </div>

        <div class="container-grid">
                    {% for container in containers %}
                <div class="container-card" data-container-name="{{ container.name|lower }}">
                    <div class="card-header">
                        <h5 class="mb-0">{{ container.name }}</h5>
                        <small class="text-muted">
                            {{ data[container.id].geo_ort|default('Unbekannt') }} / {{ data[container.id].geo_region|default('Unbekannt') }} / {{ data[container.id].geo_land|default('Unbekannt') }}
                        </small>
                        <!-- Debug: Container {{ container.id }} Data: {{ data[container.id]|json_encode }} -->
                        <script>
                            console.log('Container {{ container.id }} ({{ container.name }}):', {{ data[container.id]|json_encode|raw }});
                        </script>
                    </div>
                            <div class="card-body">
                        <div class="status-badge {{ (data[container.id].rtr_reachable|default('0')) == '1' ? 'status-online' : 'status-offline' }}">
                            {{ (data[container.id].rtr_reachable|default('0')) == '1' ? 'Online' : 'Offline' }}
                        </div>

                        <div class="metric-grid">
                            <div class="metric-card {{ data[container.id].t1_status|default('secondary') }}" 
                                 data-metric="t1" 
                                 data-container-id="{{ container.id }}"
                                 data-upper-grenze="{{ data[container.id].t1_obere_grenze|default('N/A') }}"
                                 data-lower-grenze="{{ data[container.id].t1_untere_grenze|default('N/A') }}"
                                 data-warnschwelle-obere="{{ data[container.id].t1_warnschwelle_obere|default('N/A') }}"
                                 data-warnschwelle-untere="{{ data[container.id].t1_warnschwelle_untere|default('N/A') }}">
                                <i class="bi bi-thermometer-half"></i>
                                <div class="metric-value">{{ data[container.id].t1|default('N/A') }}°C</div>
                                <div class="metric-status">
                                    {{ data[container.id].t1_status|default('N/A') }}
                                </div>
                            </div>

                            <div class="metric-card {{ data[container.id].chlor_status|default('secondary') }}"
                                 data-metric="chlor"
                                 data-container-id="{{ container.id }}"
                                 data-upper-grenze="{{ data[container.id].chlor_obere_grenze|default('N/A') }}"
                                 data-lower-grenze="{{ data[container.id].chlor_untere_grenze|default('N/A') }}"
                                 data-sollwert="{{ data[container.id].chlor_untere_sollwert|default('N/A') }}"
                                 data-warnschwelle-obere="{{ data[container.id].chlor_warnschwelle_obere|default('N/A') }}"
                                 data-warnschwelle-untere="{{ data[container.id].chlor_warnschwelle_untere|default('N/A') }}">
                                <i class="bi bi-droplet"></i>
                                <div class="metric-value">{{ data[container.id].chlor|default('N/A') }} mg/l</div>
                                <div class="metric-status">
                                    {{ data[container.id].chlor_status|default('N/A') }}
                                </div>
                            </div>

                            <div class="metric-card {{ data[container.id].redox_status|default('secondary') }}"
                                 data-metric="redox"
                                 data-container-id="{{ container.id }}"
                                 data-upper-grenze="{{ data[container.id].redox_obere_grenze|default('N/A') }}"
                                 data-lower-grenze="{{ data[container.id].redox_untere_grenze|default('N/A') }}"
                                 data-sollwert="{{ data[container.id].redox_untere_sollwert|default('N/A') }}"
                                 data-warnschwelle-obere="{{ data[container.id].redox_warnschwelle_obere|default('N/A') }}"
                                 data-warnschwelle-untere="{{ data[container.id].redox_warnschwelle_untere|default('N/A') }}">
                                <i class="bi bi-lightning"></i>
                                <div class="metric-value">{{ data[container.id].redox|default('N/A') }} mV</div>
                                <div class="metric-status">
                                    {{ data[container.id].redox_status|default('N/A') }}
                                </div>
                            </div>

                            <div class="metric-card {{ data[container.id].ph_status|default('secondary') }}"
                                 data-metric="ph"
                                 data-container-id="{{ container.id }}"
                                 data-upper-grenze="{{ data[container.id].ph_obere_grenze|default('N/A') }}"
                                 data-lower-grenze="{{ data[container.id].ph_untere_grenze|default('N/A') }}"
                                 data-sollwert="{{ data[container.id].ph_untere_sollwert|default('N/A') }}"
                                 data-warnschwelle-obere="{{ data[container.id].ph_warnschwelle_obere|default('N/A') }}"
                                 data-warnschwelle-untere="{{ data[container.id].ph_warnschwelle_untere|default('N/A') }}">
                                <i class="bi bi-water"></i>
                                <div class="metric-value">{{ data[container.id].ph|default('N/A') }} pH</div>
                                <div class="metric-status">
                                    {{ data[container.id].ph_status|default('N/A') }}
                                </div>
                            </div>
                        </div>

                        <a href="{{ path('container_show', {'id': container.id}) }}" class="detail-button">
                            Details anzeigen
                        </a>
                    </div>
                </div>
                    {% endfor %}
            </div>

        <div class="map-container">
            <h5 class="text-primary mb-3">Standort-Karte</h5>
            <div id="map"></div>
        </div>
    </div>

    <!-- Modal Template -->
    <div id="metricModal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div id="modalContent"></div>
        </div>
    </div>
    
    <script src="{{ asset('js/overview.js') }}" defer></script>
    <script src="{{ asset('js/leaflet.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Search functionality
            const searchInput = document.getElementById('searchInput');
            const containerCards = document.querySelectorAll('.container-card');

            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                containerCards.forEach(card => {
                    const containerName = card.dataset.containerName;
                    card.style.display = containerName.includes(searchTerm) ? 'block' : 'none';
                });
            });

            // Modal functionality
            const modal = document.getElementById('metricModal');
            const modalContent = document.getElementById('modalContent');
            const closeModal = document.querySelector('.close-modal');

            function showMetricDetails(containerId, metric) {
                const containerData = {
                    t1: {
                        title: 'Wassertemperatur Details',
                        current: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"] .metric-value`).textContent,
                        status: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"] .metric-status`).textContent,
                        poolSettings: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"]`).dataset.upperGrenze || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"]`).dataset.lowerGrenze || 'N/A'
                        },
                        warningThresholds: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"]`).dataset.warnschwelleObere || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="t1"]`).dataset.warnschwelleUntere || 'N/A'
                        }
                    },
                    chlor: {
                        title: 'Chlor Details',
                        current: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"] .metric-value`).textContent,
                        status: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"] .metric-status`).textContent,
                        poolSettings: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"]`).dataset.upperGrenze || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"]`).dataset.lowerGrenze || 'N/A',
                            target: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"]`).dataset.sollwert || 'N/A'
                        },
                        warningThresholds: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"]`).dataset.warnschwelleObere || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="chlor"]`).dataset.warnschwelleUntere || 'N/A'
                        }
                    },
                    redox: {
                        title: 'Redox Details',
                        current: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"] .metric-value`).textContent,
                        status: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"] .metric-status`).textContent,
                        poolSettings: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"]`).dataset.upperGrenze || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"]`).dataset.lowerGrenze || 'N/A',
                            target: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"]`).dataset.sollwert || 'N/A'
                        },
                        warningThresholds: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"]`).dataset.warnschwelleObere || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="redox"]`).dataset.warnschwelleUntere || 'N/A'
                        }
                    },
                    ph: {
                        title: 'pH-Wert Details',
                        current: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"] .metric-value`).textContent,
                        status: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"] .metric-status`).textContent,
                        poolSettings: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"]`).dataset.upperGrenze || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"]`).dataset.lowerGrenze || 'N/A',
                            target: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"]`).dataset.sollwert || 'N/A'
                        },
                        warningThresholds: {
                            upper: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"]`).dataset.warnschwelleObere || 'N/A',
                            lower: document.querySelector(`[data-container-id="${containerId}"][data-metric="ph"]`).dataset.warnschwelleUntere || 'N/A'
                        }
                    }
                };

                const metricData = containerData[metric];
                modalContent.innerHTML = `
                    <h4 class="modal-title">${metricData.title}</h4>
                    
                    <div class="modal-section">
                        <h5>Momentaner Wert</h5>
                        <div class="modal-value">
                            <strong>Wert:</strong> ${metricData.current}
                        </div>
                        <div class="modal-value">
                            <strong>Status:</strong> ${metricData.status}
                        </div>
                    </div>

                    <div class="modal-section">
                        <h5>Einstellungen von Poolsteuerung</h5>
                        <div class="modal-value">
                            <strong>Obere Grenze:</strong> ${metricData.poolSettings.upper}
                        </div>
                        <div class="modal-value">
                            <strong>Untere Grenze:</strong> ${metricData.poolSettings.lower}
                        </div>
                        ${metricData.poolSettings.target ? `
                            <div class="modal-value">
                                <strong>Sollwert:</strong> ${metricData.poolSettings.target}
                            </div>
                        ` : ''}
                    </div>

                    <div class="modal-section">
                        <h5>Swimmonitor Warnschwellen</h5>
                        <div class="modal-value">
                            <strong>Obere Grenze:</strong> ${metricData.warningThresholds.upper}
                        </div>
                        <div class="modal-value">
                            <strong>Untere Grenze:</strong> ${metricData.warningThresholds.lower}
                        </div>
                    </div>
                `;

                modal.style.display = 'block';
            }

            // Event listeners for metric cards
            document.querySelectorAll('.metric-card').forEach(card => {
                card.addEventListener('click', () => {
                    const containerId = card.dataset.containerId;
                    const metric = card.dataset.metric;
                    showMetricDetails(containerId, metric);
                });
            });

            // Close modal
            closeModal.addEventListener('click', () => {
                modal.style.display = 'none';
            });

            window.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });

            // Map initialization
            const map = L.map('map').setView([51.1657, 7.5000], 7);

            // Function to update map style based on theme
            function updateMapStyle() {
                const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
                
                // Remove existing tile layer if it exists
                if (map.hasLayer(currentTileLayer)) {
                    map.removeLayer(currentTileLayer);
                }

                // Set new tile layer based on theme
                currentTileLayer = L.tileLayer(
                    isDarkMode 
                        ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
                        : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        maxZoom: 19,
                        attribution: isDarkMode 
                            ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
                            : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    }
                ).addTo(map);

                // Update marker styles
                map.eachLayer((layer) => {
                    if (layer instanceof L.CircleMarker) {
                        const isOnline = layer.options.color === 'green';
                        layer.setStyle({
                            color: isDarkMode ? (isOnline ? '#4CAF50' : '#f44336') : (isOnline ? 'green' : 'red'),
                            fillColor: isDarkMode ? (isOnline ? '#4CAF50' : '#f44336') : (isOnline ? 'green' : 'red'),
                            fillOpacity: 0.7
                        });
                    }
                });
            }

            // Initial tile layer
            let currentTileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // Observe theme changes
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.attributeName === 'data-bs-theme') {
                        updateMapStyle();
                    }
                });
            });

            observer.observe(document.documentElement, {
                attributes: true,
                attributeFilter: ['data-bs-theme']
            });

            // Initial map style update
            updateMapStyle();

            // Load locations
            fetch('{{ path('api_get_locations') }}')
                .then(response => response.json())
                .then(locations => {
                    locations.forEach(location => {
                        const markerColor = location.status ? 'green' : 'red';
                        const marker = L.circleMarker([location.lat, location.lng], {
                            color: markerColor,
                            fillColor: markerColor,
                            fillOpacity: 0.7,
                            radius: 8
                        }).addTo(map);
                        
                        marker.bindPopup(`
                            <div class="popup-content">
                                <strong>${location.info}</strong><br>
                                Container ID: ${location.id}<br>
                                <span class="status-badge ${location.status ? 'status-online' : 'status-offline'}">
                                    ${location.status ? 'Online' : 'Offline'}
                                </span>
                                <br>
                                <a href="/ksbdueren/public/container/${location.id}" class="detail-button mt-2">
                                    Detailseite
                                </a>
                            </div>
                        `);
                    });
                })
                .catch(error => console.error('Fehler beim Laden der Geodaten:', error));
        });
    </script>
{% endblock %}

{% block javascripts %}
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof jQuery !== 'undefined') {
                $('#stationsTable').DataTable({
                    "lengthChange": false,
                    "dom": '<"row"<"col-sm-12"f>>rt<"row"<"col-sm-12"p>>i',
                    "language": {
                        "paginate": {
                            "first": "«",
                            "last": "»",
                            "next": "›",
                            "previous": "‹"
                        },
                        "search": "Suchen:"
                    }
                });
            } else {
                console.error('jQuery is not loaded');
            }
        });
    </script>
{% endblock %}