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

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



{% block header %}
    <h1></h1>
{% endblock %}

{% block breadcrumb %}
    Übersicht
{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{{ asset('css/overview.css') }}">


    <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet">
<div class="p-3 border rounded border-primary bg-body shadow border-start border-bottom">
    <h5 class="text-primary">Schwimmcontainer-Übersicht</h5>
    <!-- Tabellarische Übersicht -->
    <div class="table-responsive">
        <div id="stationsTable_wrapper" class="dataTables_wrapper no-footer">

            <table id="stationsTable" class="table table-bordered table-striped table-hover table-custom">
                <thead class="table-header">
                <tr>
                    <th >Name</th>
                    <th >Geräte Status</th>
                    <th >Wassertemperatur</th>
                    <th >Chlor</th>
                    <th >Redox</th>
                    <th >PH-Wert</th>

                </tr>
                </thead>
                <tbody>
                {% for container in containers %}
                <tr>
                    <td>
                        <b>
                            <a href="{{ path('container_show', {'id': container.id}) }}">{{ container.name }}</a>
                        </b>
                        <br>
                        <span style="color: #555660; font-size: smaller; padding-left: 1em;">
                             Standort: {{ data[container.id].geo_ort }} / {{ data[container.id].geo_region }} / {{ data[container.id].geo_land }}
                        </span>
                    </td>

                    <td>
                        {% if  data[container.id].rtr_reachable == '1' %}
                            <button class="btn btn-success">Online</button>

                        {% else %}
                            <button class="btn btn-danger">Offline</button>
                        {% endif %}

                      </td>
                    {% macro get_button_class(status) %}
                        {% if status|trim == 'danger' %}
                            btn-danger
                        {% elseif status|trim == 'warning' %}
                            btn-warning
                        {% elseif status|trim == 'success' %}
                            btn-success
                        {% else %}
                            btn-secondary
                            btn-secondary
                        {% endif %}
                    {% endmacro %}

                    <!-- Button für t1 -->
                    <td><button class="btn {{ _self.get_button_class(data[container.id].t1_status) }}" id="toggle-card-btn-t1">{{ data[container.id].t1 }} [°C]</button>
                    <div id="t1-card" class="card" style="display: none;">
                        <div class="card-body">
                            <p><strong><i class="bi bi-speedometer2"></i> Momentan Wert:</strong> {{ data[container.id].t1 }}</p>
                            <p><strong><i class="fas fa-check-circle"></i> Status:</strong> {{ data[container.id].t1_status }}</p>
                            <hr>
                            <p><strong>Einstellungen vom Bayrol:</strong> </p>

                            <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].t1_obere_grenze }}</p>
                            <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].t1_untere_grenze }}</p>
                            <hr>
                            <p><strong>Swimmonitor Warnschwellen:</strong> </p>

                            <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].t1_warnschwelle_obere }}</p>
                            <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].t1_warnschwelle_untere }}</p>
                        </div>
                    </div>
                    </td>
                    <!-- Button für Chlor -->
                    <td>
                        <button class="btn {{ _self.get_button_class(data[container.id].chlor_status) }}" id="toggle-card-btn-chlor">{{ data[container.id].chlor }} [mg/l]</button>
                        <!-- Card für Chlor -->
                        <div id="chlor-card" class="card" style="display: none;">
                            <div class="card-body">
                                <p><strong><i class="bi bi-speedometer2"></i> Momentan Wert:</strong> {{ data[container.id].chlor }}</p>
                                <p><strong><i class="fas fa-check-circle"></i> Status:</strong> {{ data[container.id].chlor_status }}</p>
                                <hr>
                                <p><strong>Einstellungen vom Bayrol:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].chlor_obere_grenze }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].chlor_untere_grenze }}</p>
                                <p><strong><i class="fas fa-bullseye"></i> Sollwert:</strong> {{ data[container.id].chlor_untere_sollwert }}</p>
                                <hr>
                                <p><strong>Swimmonitor Warnschwellen:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].chlor_warnschwelle_obere }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].chlor_warnschwelle_untere }}</p>
                            </div>


                        </div>
                    </td>

                    <!-- Button für Redox -->
                    <td>
                        <button class="btn {{ _self.get_button_class(data[container.id].redox_status) }}" id="toggle-card-btn-redox">{{ data[container.id].redox }} [mV]</button>
                        <div id="redox-card" class="card" style="display: none;">
                            <div class="card-body">
                                <p><strong><i class="bi bi-speedometer2"></i> Momentan Wert:</strong> {{ data[container.id].redox }}</p>
                                <p><strong><i class="fas fa-check-circle"></i> Status:</strong> {{ data[container.id].redox_status }}</p>
                                <hr>
                                <p><strong>Einstellungen vom Bayrol:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].redox_obere_grenze }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].redox_untere_grenze }}</p>
                                <p><strong><i class="fas fa-bullseye"></i> Sollwert:</strong> {{ data[container.id].redox_untere_sollwert }}</p>
                                <hr>
                                <p><strong>Swimmonitor Warnschwellen:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].redox_warnschwelle_obere }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].redox_warnschwelle_untere }}</p>
                            </div>
                        </div>
                    </td>

                    <!-- Button für pH -->
                    <td>
                        <button class="btn {{ _self.get_button_class(data[container.id].ph_status) }}" id="toggle-card-btn-ph">{{ data[container.id].ph }} [pH]</button>
                        <div id="ph-card" class="card" style="display: none;">
                            <div class="card-body">
                                <p><strong><i class="bi bi-speedometer2"></i> Momentan Wert:</strong> {{ data[container.id].ph }}</p>
                                <p><strong><i class="fas fa-check-circle"></i> Status:</strong> {{ data[container.id].ph_status }}</p>
                                <hr>
                                <p><strong>Einstellungen vom Bayrol:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].ph_obere_grenze }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].ph_untere_grenze }}</p>
                                <p><strong><i class="fas fa-bullseye"></i> Sollwert:</strong> {{ data[container.id].ph_untere_sollwert }}</p>
                                <hr>
                                <p><strong>Swimmonitor Warnschwellen:</strong> </p>

                                <p><strong><i class="bi bi-arrow-up-circle"></i> Obere Grenze:</strong> {{ data[container.id].ph_warnschwelle_obere }}</p>
                                <p><strong><i class="bi bi-arrow-down-circle"></i> Untere Grenze:</strong> {{ data[container.id].ph_warnschwelle_untere }}</p>
                            </div>
                        </div>

                    </td>
                </tr>
                {% endfor %}
                </tbody>



            </table>
</div>
    </div>
    </div>

    <!-- jQuery CDN einbinden (muss vor dem DataTables-Skript sein) -->
    <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>

    <!-- DataTables Script -->
    <script src="{{ asset('js/dataTables.bootstrap5.min.js') }}"></script>

    <script src="{{ asset('js/overview.js') }}"></script>


    <script>
        $(document).ready(function() {
            $('#stationsTable').DataTable(
                {
                    "lengthChange": false
                }


            );
        });
    </script>
<br><br>

    <div class="p-3 border rounded border-primary bg-body shadow border-start border-bottom">
        <h5 class="text-primary">Standort-Karte</h5>
    <div id="map" style="height: 700px; width: 50%;    z-index:0; justify-self: center;" class="border rounded  shadow border-start border-bottom" ></div>
    </div>
    <script src="{{ asset('js/leaflet.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
    <script>
        document.addEventListener('DOMContentLoaded', () => {







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

            // OpenStreetMap-Tiles laden
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

               // L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {

                maxZoom: 19,
            }).addTo(map);

            // Geodaten von der API laden
            fetch('api/locations')
                .then(response => response.json())
                .then(locations => {
                    locations.forEach(location => {
                        // Definiere die Marker-Farbe basierend auf dem Status
                        const markerColor = location.status ? 'green' : 'red'; // Grün für true, Rot für false

                        const marker = L.circleMarker([location.lat, location.lng], {
                            color: markerColor, // Setze die Farbe des Markers
                            radius: 8 // Setze die Größe des Markers (optional)
                        }).addTo(map);
                        marker.bindPopup('<strong>' + location.info + '</strong><br>Container ID: ' + location.id +'<br>' + (location.status ? ' <button class="btn btn-success">Online</button>' : ' <button class="btn btn-danger">Offline</button>'));
                    });
                });
        });
    </script>

{% endblock %}