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

{% block title %}SwimMonitor - Detailseite: {{ container.name }}{% endblock %}



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

{% block breadcrumb %}
    Detailseite >> {{ container.name }}
{% endblock %}

{% block content %}
    {# Variablen für die Konfiguration #}
    {% set base_url = 'https://grafana.dp-smartsolutions.de:999/d-solo/ae7h0xl44cg00a/bayrol' %}
    {% set org_id = 1 %}
    {% set timezone = 'browser' %}
    {% set theme = 'light' %} {# Standard-Theme (kann durch JavaScript dynamisch überschrieben werden) #}
    {% set from = 'now-24h' %}
    {% set to = 'now' %}
    {% set panels = [2, 5, 3, 4] %}
    {% set panels_gauges = [6, 7, 8, 9] %}
    <link rel="stylesheet" href="{{ asset('css/container.css') }}">
<div class="row device-overview">
    <div class="col-md-4">
        <div class="card shadow border-start border-bottom">
            <div class="card-body">
                <h2 class="card-title"><b>{{ container.name }}</b></h2>
                <hr>
                <img src="https://dpohl-engineering.de/container.jpg" id="stationpicture">

                <h4 class="mt-4">GENERAL INFORMATION</h4>
                <hr>
                <table class="table table-bordered table-striped">
                    <tbody>
                    <tr>
                        <td>Aktueller Ort:</td>
                        <td class="text-end"> {{ datapoints.geo_ort }} / {{ datapoints.geo_region }} / {{ datapoints.geo_land }}</td>
                    </tr>
                    <tr>
                        <td>Typ:</td>
                        <td class="text-end">{{ container.type }}</td>
                    </tr>
                    </tbody>
                </table>

                <!-- Rest des Inhalts -->
            </div>
        </div>
    </div>

    <!-- Tab-Navigation und Inhalte -->
    <div class="col-md-8" id=tabslist>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="stammdaten-tab" data-bs-toggle="tab" data-bs-target="#stammdaten" type="button" role="tab">Anlagendaten</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="kalender-tab" data-bs-toggle="tab" data-bs-target="#kalender" type="button" role="tab">Kalender</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard" type="button" role="tab">Dashboard</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="dokumente-tab" data-bs-toggle="tab" data-bs-target="#dokumente" type="button" role="tab">Dokumente</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pruefungen-tab" data-bs-toggle="tab" data-bs-target="#pruefungen" type="button" role="tab">Prüfungen</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="diagnosen-tab" data-bs-toggle="tab" data-bs-target="#diagnosen" type="button" role="tab">Diagnosen</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="technische-konfiguration-tab" data-bs-toggle="tab" data-bs-target="#technische-konfiguration" type="button" role="tab">Technische Konfiguration</button>
            </li>
        </ul>

        <div class="tab-content">
            <!-- Stammdaten Tab -->
            <div class="tab-pane fade" id="stammdaten" role="tabpanel">

            </div>
            <!-- Kalender Tab -->
            <div class="tab-pane fade" id="kalender" role="tabpanel">
                <h5>Kalender</h5>
                <p>Hier findest du den Kalender mit wichtigen Terminen.</p>
            </div>
            <!-- Dashboard Tab -->
            <!-- Dashboard Tab -->
            <div class="tab-pane fade show active" id="dashboard" role="tabpanel">
                <h5>Dashboard</h5>
                <div class="card shadow border-start border-bottom">
                    <div class="card-body">
                        <p>Momentan Werte:</p>
                        {% for panel_id in panels_gauges %}

                            <div class="iframe-placeholder"
                                 data-src="{{ base_url }}?orgId={{ org_id }}&timezone={{ timezone }}&theme={{ theme }}&panelId={{ panel_id }}&__feature.dashboardSceneSolo&from={{ from }}&to={{ to }}"
                                 data-width="250"
                                 data-height="250">
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <hr>
                <div class="card shadow border-start border-bottom">
                    <div class="card-body">
                        <p>Verläufe:</p>
                        {% for panel_id in panels %}
                            <div class="iframe-placeholder"
                                 data-src="{{ base_url }}?orgId={{ org_id }}&timezone={{ timezone }}&theme={{ theme }}&panelId={{ panel_id }}&__feature.dashboardSceneSolo&from={{ from }}&to={{ to }}"
                                 data-width="100%"
                                 data-height="400">
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!-- Dokumente Tab -->
            <div class="tab-pane fade" id="dokumente" role="tabpanel">
                <h5>Dokumente</h5>
                <p>Hier findest du die relevanten Dokumente.</p>
            </div>
            <!-- Anlagenkataster Tab -->
            <div class="tab-pane fade" id="anlagenkataster" role="tabpanel">
                <h5>Anlagenkataster</h5>
                <p>Hier findest du das Anlagenkataster.</p>
            </div>
            <!-- Prüfungen Tab -->
            <div class="tab-pane fade" id="pruefungen" role="tabpanel">

            </div>
            <!-- Diagnosen Tab -->
            <div class="tab-pane fade" id="diagnosen" role="tabpanel">
                <h5>Diagnosen</h5>
                <p>Hier findest du die Diagnosen.</p>
            </div>
            <!-- Technische Konfiguration Tab -->
            <div class="tab-pane fade" id="technische-konfiguration" role="tabpanel">
                <h5>Container Einstellungen</h5>
                <div class="card shadow border-start border-bottom">
                    <div class="card-body">
                        <div class="alert alert-light">
                            Hier können Sie den Warnwert für das gewählte Parameter einstellen. Der Warnwert sollte innerhalb des zulässigen Bereichs liegen.<br>
                            Die Werte werden ständig geprüft und bei Überschreiten dieser wird eine automatische Benachrichtigung vom System ausgeführt.
                        </div>
                {{ form_start(form) }}
                <table class="table table-striped">
                    <thead>
                    <tr><th colspan="2">Einstellung der Warnwerte</th></tr>
                    <tr>
                        <th>Bezeichnung</th>
                        <th>Wert</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for field in form %}
                        {% if field.vars.name != 'save' and field.vars.name != '_token' %}
                            <tr>
                                <td>{{ form_label(field) }}</td>

                                <td>
                                    <div class="input-group">
                                        {{ form_widget(field, {'attr': {'class': 'form-control'}}) }}
                                        <span class="input-group-text">
                                        {% if field.vars.name == 'chlor_warnschwelle-obere' or field.vars.name == 'chlor_warnschwelle-untere' %}
                                            mg/l
                                        {% elseif field.vars.name == 'ph_warnschwelle-obere' or field.vars.name == 'ph_warnschwelle-untere' %}
                                            pH
                                        {% elseif field.vars.name == 'redox_warnschwelle-obere' or field.vars.name == 'redox_warnschwelle-untere' %}
                                            mV
                                        {% elseif field.vars.name == 't1_warnschwelle-obere' or field.vars.name == 't1_warnschwelle-untere' %}
                                            °C
                                        {% endif %}
                                    </span>
                                    </div>
                                </td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    </tbody>
                </table>
                <div class="form-group">
                    {# Render only the 'save' button separately, outside the loop #}
                    {{ form_widget(form.save, {'attr': {'class': 'btn btn-primary'}}) }}
                </div>
                {{ form_end(form) }}
            </div>
            </div>
            </div>
        </div>
    </div>


</div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Funktion zum Ermitteln des aktuellen Themes
            const currentTheme = () => document.documentElement.getAttribute("data-theme") || "light";

            // Funktion zum Erstellen eines Iframes
            function createIframe(src, width, height) {
                const iframe = document.createElement("iframe");
                iframe.src = src;
                iframe.width = width;
                iframe.height = height;
                iframe.frameBorder = "0";
                return iframe;
            }

            // Funktion zum Laden der Iframes mit Verzögerung
            function loadIframesWithDelay() {
                const placeholders = document.querySelectorAll(".iframe-placeholder");

                placeholders.forEach((placeholder, index) => {
                    setTimeout(() => {
                        let src = placeholder.dataset.src;

                        // Theme-Parameter anpassen
                        src = src.replace(/theme=\w+/, `theme=${currentTheme()}`);

                        const iframe = createIframe(src, placeholder.dataset.width, placeholder.dataset.height);

                        // Die Platzhalter-Elemente durch die neuen Iframes ersetzen
                        placeholder.replaceWith(iframe);
                    }, index * 500); // Verzögerung von 500 ms zwischen den Iframes
                });
            }

            // Initiales Laden der Iframes mit Verzögerung
            loadIframesWithDelay();
            function reloadIframes() {
                // Alle bestehenden Iframes finden
                const iframes = document.querySelectorAll("iframe");

                // Theme aus dem aktuellen Dokument holen
                const theme = document.documentElement.getAttribute("data-theme") || "light";

                // Jedes Iframe bearbeiten
                iframes.forEach(iframe => {
                    // Die aktuelle src URL auslesen
                    const currentSrc = iframe.getAttribute("src");

                    // Sicherstellen, dass das iframe eine gültige src hat
                    if (currentSrc) {
                        // Die URL anpassen, indem das Theme ersetzt wird
                        const updatedSrc = currentSrc.replace(/theme=\w+/, `theme=${theme}`);

                        // Die src-URL des Iframes aktualisieren
                        iframe.setAttribute("src", updatedSrc);

                        // Log zur Überprüfung (optional)
                        console.log(`Iframe aktualisiert: ${updatedSrc}`);
                    }
                });
            }



            // Select all theme buttons
            const themeButtons = document.querySelectorAll('[data-bs-theme-value]');

// Event listener for each button
            themeButtons.forEach(button => {
                button.addEventListener('click', () => {
                    reloadIframes();
                });
            });








        });
    </script>


{% endblock %}