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

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



{% block header %}
    <div class="container-header">
        <h1 class="display-4">{{ container.name }}</h1>
        <div class="container-status">
            <span class="badge bg-success">Aktiv</span>
        </div>
    </div>
{% endblock %}

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

{% block content %}
    {# Variablen für die Konfiguration #}
    {% if container.id == 2 %}
        {% set base_url = 'https://grafana.dp-smartsolutions.de/d-solo/cel6vwl12du68f/narwali2' %}
        {% set panels = [2, 5, 3, 4, 12] %}
        {% set panels_gauges = [6, 7, 8, 9, 11, 10, ] %}
    {% elseif container.id == 3 %}
        {% set base_url = 'https://grafana.dp-smartsolutions.de/d-solo/dezg82l39296oe/mobi' %}
        {% set panels = [2, 5, 3, 4] %}
        {% set panels_gauges = [6, 7, 8, 9] %}
    {% else %}
        {% set base_url = 'https://grafana.dp-smartsolutions.de/d-solo/ae7h0xl44cg00a/bayrol' %}
        {% set panels = [2, 5, 3, 4] %}
        {% set panels_gauges = [6, 7, 8, 9] %}
    {% endif %}
    {% 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' %}
    <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 h-100">
            <div class="card-body">
                <h2 class="card-title mb-4"><b>{{ container.name }}</b></h2>
                <div class="container-image-wrapper mb-4">
                    {% if container.id == 2 %}
                        <img src="{{ asset('images/narwali2.jpeg') }}" alt="Schwimmcontainer Narwali 2" class="location-img" style="width: 100%;">
                    {% elseif container.id == 3 %}
                        <img src="{{ asset('images/mobi_container.jpeg') }}" alt="Schwimmcontainer Mobi" class="location-img" style="width: 100%;">
                    {% else %}
                        <img src="{{ asset('images/narwali1.jpg') }}" alt="Schwimmcontainer Narwali 1" class="location-img"  style="width: 100%;">
                    {% endif %}

                </div>

                <h4 class="section-title">GENERAL INFORMATION</h4>
                <hr class="section-divider">
                <table class="table table-bordered table-striped">
                    <tbody>
                    <tr>
                        <td><i class="fas fa-map-marker-alt me-2"></i>Aktueller Ort:</td>
                        <td class="text-end">{{ datapoints.geo_ort }} / {{ datapoints.geo_region }} / {{ datapoints.geo_land }}</td>
                    </tr>
                    <tr>
                        <td><i class="fas fa-info-circle me-2"></i>Typ:</td>
                        <td class="text-end">{{ container.type }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab-Navigation und Inhalte -->
    <div class="col-md-8" id="tabslist">
        <ul class="nav nav-tabs nav-fill" 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">
                    <i class="fas fa-database me-2"></i>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">
                    <i class="fas fa-calendar me-2"></i>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">
                    <i class="fas fa-chart-line me-2"></i>Dashboard
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="datenexport-tab" data-bs-toggle="tab" data-bs-target="#datenexport" type="button" role="tab">
                    <i class="fas fa-download me-2"></i>Datenexport
                </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">
                    <i class="fas fa-file-alt me-2"></i>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">
                    <i class="fas fa-clipboard-check me-2"></i>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">
                    <i class="fas fa-stethoscope me-2"></i>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">
                    <i class="fas fa-cogs me-2"></i>Technische Konfiguration
                </button>
            </li>
        </ul>

        <div class="tab-content">
            <!-- Stammdaten Tab -->
            <div class="tab-pane fade" id="stammdaten" role="tabpanel">
                <div class="card shadow border-start border-bottom">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="mb-0">Anlagendaten</h5>
                            <button type="button" class="btn btn-outline-primary" id="editAnlagendaten">
                                <i class="fas fa-edit me-2"></i>Bearbeiten
                            </button>
                        </div>
                        
                        <!-- Anzeige-Modus -->
                        <div id="displayMode">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex justify-content-between align-items-start p-3 border rounded">
                                        <div>
                                            <h6 class="text-muted mb-1">Baujahr</h6>
                                            <p class="mb-0 h5">{{ container.baujahr ?? '-' }}</p>
                                        </div>
                                        <i class="fas fa-calendar-alt text-muted fa-2x"></i>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex justify-content-between align-items-start p-3 border rounded">
                                        <div>
                                            <h6 class="text-muted mb-1">Typ</h6>
                                            <p class="mb-0 h5">{{ container.type ?? '-' }}</p>
                                        </div>
                                        <i class="fas fa-tag text-muted fa-2x"></i>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex justify-content-between align-items-start p-3 border rounded">
                                        <div>
                                            <h6 class="text-muted mb-1">Größe</h6>
                                            <p class="mb-0 h5">{{ container.groesse ?? '-' }}</p>
                                        </div>
                                        <i class="fas fa-arrows-alt text-muted fa-2x"></i>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex justify-content-between align-items-start p-3 border rounded">
                                        <div>
                                            <h6 class="text-muted mb-1">Wassermenge</h6>
                                            <p class="mb-0 h5">{{ container.wassermenge ?? '-' }}</p>
                                        </div>
                                        <i class="fas fa-tint text-muted fa-2x"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- Anzeige der dynamischen Felder -->
                            {% if container.customFields %}
                                <h6 class="text-muted mb-3 mt-4"><i class="fas fa-list me-2"></i>Zusätzliche Felder</h6>
                                <div class="row">
                                    {% for key, value in container.customFields %}
                                        <div class="col-md-6 mb-3">
                                            <div class="p-3 border rounded">
                                                <h6 class="text-muted mb-1">{{ key }}</h6>
                                                <p class="mb-0 h6">{{ value }}</p>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="alert alert-light mt-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Keine zusätzlichen Felder vorhanden
                                </div>
                            {% endif %}
                        </div>

                        <!-- Bearbeitungs-Modus -->
                        <div id="editMode" style="display: none;">
                            <!-- Grunddaten -->
                            <div class="mb-4">
                                <h6 class="text-muted mb-3"><i class="fas fa-info-circle me-2"></i>Grunddaten</h6>
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Baujahr</label>
                                        <input type="number" class="form-control" id="baujahr" value="{{ container.baujahr ?? '' }}" placeholder="z.B. 2020">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Typ</label>
                                        <input type="text" class="form-control" id="typ" value="{{ container.type ?? '' }}" placeholder="z.B. Premium">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Größe</label>
                                        <input type="text" class="form-control" id="groesse" value="{{ container.groesse ?? '' }}" placeholder="z.B. 5x10m">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Wassermenge</label>
                                        <input type="text" class="form-control" id="wassermenge" value="{{ container.wassermenge ?? '' }}" placeholder="z.B. 50.000l">
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <!-- Dynamische Felder -->
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-muted mb-0"><i class="fas fa-list me-2"></i>Zusätzliche Felder</h6>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="addCustomField">
                                        <i class="fas fa-plus me-1"></i>Feld hinzufügen
                                    </button>
                                </div>
                                <div id="customFieldsContainer">
                                    {% if container.customFields %}
                                        {% for key, value in container.customFields %}
                                            <div class="custom-field-item mb-2 row">
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control custom-field-label" placeholder="Bezeichnung" value="{{ key }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control custom-field-value" placeholder="Wert" value="{{ value }}">
                                                </div>
                                                <div class="col-md-1">
                                                    <button type="button" class="btn btn-sm btn-danger remove-field">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>

                            <div class="alert alert-info">
                                <i class="fas fa-lightbulb me-2"></i>
                                <strong>Tipp:</strong> Fügen Sie zusätzliche Informationen wie "Hersteller", "Seriennummer", "Wartungsdatum" etc. als dynamische Felder hinzu.
                            </div>

                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" id="saveAnlagendaten">
                                    <i class="fas fa-save me-2"></i>Speichern
                                </button>
                                <button type="button" class="btn btn-secondary" id="cancelEdit">
                                    <i class="fas fa-times me-2"></i>Abbrechen
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Kalender Tab -->
            <div class="tab-pane fade" id="kalender" role="tabpanel">
                <div id="calendar-container"></div>
            </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>
            <!-- Datenexport Tab -->
            <div class="tab-pane fade" id="datenexport" role="tabpanel">
                <h5>Datenexport aus InfluxDB</h5>
                <div class="card shadow border-start border-bottom">
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            Wählen Sie einen Zeitraum aus, um Daten für Chlor, Redox, pH und Temperatur aus der InfluxDB zu exportieren.
                        </div>
                        
                        <form id="exportForm" method="POST" action="{{ path('container_export_data', {'id': container.id}) }}">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="startDate" class="form-label">Startdatum:</label>
                                        <input type="date" class="form-control" id="startDate" name="startDate" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="startTime" class="form-label">Startzeit:</label>
                                        <input type="time" class="form-control" id="startTime" name="startTime" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="endDate" class="form-label">Enddatum:</label>
                                        <input type="date" class="form-control" id="endDate" name="endDate" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="endTime" class="form-label">Endzeit:</label>
                                        <input type="time" class="form-control" id="endTime" name="endTime" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Parameter auswählen:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="chlor" name="parameters[]" value="chlor" checked>
                                    <label class="form-check-label" for="chlor">
                                        Chlor (mg/l)
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="redox" name="parameters[]" value="redox" checked>
                                    <label class="form-check-label" for="redox">
                                        Redox (mV)
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="ph" name="parameters[]" value="ph" checked>
                                    <label class="form-check-label" for="ph">
                                        pH-Wert
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="temp" name="parameters[]" value="temp" checked>
                                    <label class="form-check-label" for="temp">
                                        Temperatur (°C)
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Export-Format:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" id="csv" name="exportFormat" value="csv" checked>
                                    <label class="form-check-label" for="csv">
                                        CSV-Datei
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" id="graph" name="exportFormat" value="graph">
                                    <label class="form-check-label" for="graph">
                                        Grafische Darstellung
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" id="both" name="exportFormat" value="both">
                                    <label class="form-check-label" for="both">
                                        Beides (CSV + Grafik)
                                    </label>
                                </div>
                            </div>
                            
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-download me-2"></i>Daten exportieren
                                </button>
                                <button type="button" class="btn btn-secondary" id="previewBtn">
                                    <i class="fas fa-eye me-2"></i>Vorschau
                                </button>
                            </div>
                        </form>
                        
                        <!-- Vorschau-Bereich -->
                        <div id="previewArea" class="mt-4" style="display: none;">
                            <h6>Datenvorschau:</h6>
                            <div id="previewContent" class="border rounded p-3 bg-light">
                                <!-- Hier werden die Vorschaudaten angezeigt -->
                            </div>
                        </div>
                        
                        <!-- Export-Historie -->
                        <div class="mt-4">
                            <h6>Letzte Exporte:</h6>
                            <div id="exportHistory" class="border rounded p-3 bg-light">
                                <p class="text-muted">Noch keine Exporte durchgeführt.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Dokumente Tab -->
            <div class="tab-pane fade" id="dokumente" role="tabpanel">
                {% include 'container/_documents.html.twig' with {'container': container} %}
            </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 () {
            // Anlagendaten JavaScript - Modus-Umschaltung
            const editButton = document.getElementById('editAnlagendaten');
            const displayMode = document.getElementById('displayMode');
            const editMode = document.getElementById('editMode');
            
            // Bearbeiten-Button
            editButton?.addEventListener('click', function() {
                displayMode.style.display = 'none';
                editMode.style.display = 'block';
                editButton.style.display = 'none';
            });

            // Abbrechen-Button
            document.getElementById('cancelEdit')?.addEventListener('click', function() {
                displayMode.style.display = 'block';
                editMode.style.display = 'none';
                editButton.style.display = 'block';
                
                // Seite neu laden, um Änderungen zu verwerfen
                location.reload();
            });

            let customFieldCounter = 0;

            // Feld hinzufügen
            document.getElementById('addCustomField')?.addEventListener('click', function() {
                const container = document.getElementById('customFieldsContainer');
                const fieldItem = document.createElement('div');
                fieldItem.className = 'custom-field-item mb-2 row';
                fieldItem.innerHTML = `
                    <div class="col-md-5">
                        <input type="text" class="form-control custom-field-label" placeholder="Bezeichnung">
                    </div>
                    <div class="col-md-6">
                        <input type="text" class="form-control custom-field-value" placeholder="Wert">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-sm btn-danger remove-field">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                container.appendChild(fieldItem);
                
                // Event Listener für Löschen-Button
                fieldItem.querySelector('.remove-field').addEventListener('click', function() {
                    fieldItem.remove();
                });
            });

            // Event Listener für alle vorhandenen Löschen-Buttons
            document.querySelectorAll('.remove-field').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.custom-field-item').remove();
                });
            });

            // Speichern der Anlagendaten
            document.getElementById('saveAnlagendaten')?.addEventListener('click', function() {
                const button = this;
                const originalText = button.innerHTML;
                
                // Daten sammeln
                const data = {
                    baujahr: document.getElementById('baujahr').value,
                    type: document.getElementById('typ').value,
                    groesse: document.getElementById('groesse').value,
                    wassermenge: document.getElementById('wassermenge').value,
                    customFields: {}
                };

                // Dynamische Felder sammeln
                document.querySelectorAll('.custom-field-item').forEach(item => {
                    const label = item.querySelector('.custom-field-label').value.trim();
                    const value = item.querySelector('.custom-field-value').value.trim();
                    if (label && value) {
                        data.customFields[label] = value;
                    }
                });

                // Loading-State
                button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Speichere...';
                button.disabled = true;

                // AJAX-Request
                fetch('/api/container/{{ container.id }}/anlagendaten', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        // Seite neu laden, um die aktualisierten Daten anzuzeigen
                        location.reload();
                    } else {
                        throw new Error(result.message || 'Fehler beim Speichern');
                    }
                })
                .catch(error => {
                    const alertDiv = document.createElement('div');
                    alertDiv.className = 'alert alert-danger alert-dismissible fade show';
                    alertDiv.innerHTML = `
                        <i class="fas fa-exclamation-triangle me-2"></i>Fehler: ${error.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    `;
                    button.parentElement.insertBefore(alertDiv, button);
                })
                .finally(() => {
                    button.innerHTML = originalText;
                    button.disabled = false;
                });
            });

            // Funktion zum Ermitteln des aktuellen Themes
            const currentTheme = () => document.documentElement.getAttribute("data-bs-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);
                        placeholder.replaceWith(iframe);
                    }, index * 500);
                });
            }

            // Initiales Laden der Iframes
            loadIframesWithDelay();

            // Funktion zum Neuladen aller Iframes
            function reloadIframes() {
                const iframes = document.querySelectorAll("iframe");
                const theme = currentTheme();

                iframes.forEach(iframe => {
                    const currentSrc = iframe.getAttribute("src");
                    if (currentSrc) {
                        const updatedSrc = currentSrc.replace(/theme=\w+/, `theme=${theme}`);
                        iframe.setAttribute("src", updatedSrc);
                    }
                });
            }

            // Event Listener für Theme-Änderungen
            const themeButtons = document.querySelectorAll('[data-bs-theme-value]');
            themeButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // Kurze Verzögerung, um sicherzustellen, dass das Theme bereits geändert wurde
                    setTimeout(reloadIframes, 100);
                });
            });

            // Event Listener für System-Theme-Änderungen
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                setTimeout(reloadIframes, 100);
            });

            // Datenexport-Funktionalität
            const exportForm = document.getElementById('exportForm');
            const previewBtn = document.getElementById('previewBtn');
            const previewArea = document.getElementById('previewArea');
            const previewContent = document.getElementById('previewContent');

            // Standardwerte für Datum und Zeit setzen
            const now = new Date();
            const yesterday = new Date(now);
            yesterday.setDate(yesterday.getDate() - 1);
            
            document.getElementById('startDate').value = yesterday.toISOString().split('T')[0];
            document.getElementById('startTime').value = '00:00';
            document.getElementById('endDate').value = now.toISOString().split('T')[0];
            document.getElementById('endTime').value = '23:59';

            // Vorschau-Button Event Listener
            previewBtn.addEventListener('click', function() {
                const formData = new FormData(exportForm);
                const parameters = formData.getAll('parameters[]');
                
                if (parameters.length === 0) {
                    alert('Bitte wählen Sie mindestens einen Parameter aus.');
                    return;
                }

                // AJAX-Call zur Vorschau
                previewContent.innerHTML = `
                    <div class="text-center">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Lade Vorschau...
                    </div>
                `;
                previewArea.style.display = 'block';

                console.log('Sending preview request...');
                console.log('FormData:', Object.fromEntries(formData));
                
                fetch('{{ path('container_export_preview', {'id': container.id}) }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers);
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);
                    if (data.error) {
                        previewContent.innerHTML = `
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                ${data.error}
                            </div>
                        `;
                    } else {
                        let tableRows = '';
                        if (data.data.length > 0) {
                            const columns = Object.keys(data.data[0]);
                            const headers = columns.map(col => {
                                const labels = {
                                    'time': 'Zeitstempel',
                                    'chlor': 'Chlor (mg/l)',
                                    'redox': 'Redox (mV)',
                                    'ph': 'pH-Wert',
                                    't1': 'Temperatur (°C)'
                                };
                                return labels[col] || col;
                            });
                            
                            tableRows = `
                                <thead>
                                    <tr>
                                        ${headers.map(h => `<th>${h}</th>`).join('')}
                                    </tr>
                                </thead>
                                <tbody>
                                    ${data.data.map(row => `
                                        <tr>
                                            ${columns.map(col => `<td>${row[col]}</td>`).join('')}
                                        </tr>
                                    `).join('')}
                                </tbody>
                            `;
                        }

                        previewContent.innerHTML = `
                            <div class="alert alert-info">
                                <strong>Vorschau für:</strong> ${formData.get('startDate')} ${formData.get('startTime')} bis ${formData.get('endDate')} ${formData.get('endTime')}<br>
                                <strong>Parameter:</strong> ${parameters.join(', ')}<br>
                                <strong>Gefundene Datensätze:</strong> ${data.totalRecords}
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    ${tableRows}
                                </table>
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Preview error:', error);
                    previewContent.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Fehler beim Laden der Vorschau: ${error.message}
                        </div>
                    `;
                });
            });

            // Form Submit Event Listener
            exportForm.addEventListener('submit', function(e) {
                const parameters = document.querySelectorAll('input[name="parameters[]"]:checked');
                
                if (parameters.length === 0) {
                    e.preventDefault();
                    alert('Bitte wählen Sie mindestens einen Parameter aus.');
                    return;
                }

                // Loading-State für den Submit-Button
                const submitBtn = exportForm.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Exportiere...';
                submitBtn.disabled = true;

                // Button nach 5 Sekunden wieder aktivieren (falls kein Redirect erfolgt)
                setTimeout(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }, 5000);
            });

            // Container-spezifischer Kalender - Initialisierung beim Tab-Wechsel
            let calendarInstance = null;
            
            // Event Listener für Tab-Wechsel
            const kalenderTab = document.getElementById('kalender-tab');
            const calendarContainer = document.getElementById('calendar-container');
            
            // Initialisierung der Kalender-Bibliothek
            function loadCalendarLibrary() {
                return new Promise((resolve) => {
                    // CSS laden
                    if (!document.querySelector('link[href*="fullcalendar"]')) {
                        const link = document.createElement('link');
                        link.rel = 'stylesheet';
                        link.href = 'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css';
                        document.head.appendChild(link);
                    }
                    
                    // JS laden
                    if (!window.FullCalendar) {
                        const script = document.createElement('script');
                        script.src = 'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js';
                        script.onload = () => resolve(true);
                        document.head.appendChild(script);
                    } else {
                        resolve(true);
                    }
                });
            }
            
            // Kalender initialisieren
            function initContainerCalendar() {
                const containerId = {{ container.id }};
                
                calendarInstance = new FullCalendar.Calendar(calendarContainer, {
                    initialView: 'dayGridMonth',
                    locale: 'de',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
                    events: function(info, successCallback, failureCallback) {
                        const url = '/ksbdueren/public/api/container-appointments';
                        const params = new URLSearchParams();
                        params.append('containerId', containerId);
                        
                        fetch(url + '?' + params.toString())
                            .then(response => response.json())
                            .then(data => {
                                successCallback(data);
                            })
                            .catch(error => {
                                console.error('Error loading events:', error);
                                failureCallback(error);
                            });
                    },
                    eventContent: function(arg) {
                        return {
                            html: `
                                <div style="padding: 2px;">
                                    <i class="fas ${arg.event.extendedProps.icon || 'fa-calendar'}"></i>
                                    ${arg.event.title}
                                </div>
                            `
                        };
                    },
                    editable: true,
                    selectable: true,
                    selectMirror: true,
                    select: function(info) {
                        showAppointmentModal(null, info.start, info.end);
                    },
                    eventClick: function(info) {
                        showAppointmentModal(info.event);
                    },
                    eventDrop: function(info) {
                        updateAppointment(info.event);
                    },
                    eventResize: function(info) {
                        updateAppointment(info.event);
                    },
                    height: 'auto'
                });
                
                calendarInstance.render();
            }
            
            // Modal für Termine
            function showAppointmentModal(event, start, end) {
                // Modal erstellt falls nicht vorhanden
                let modal = document.getElementById('appointmentModal');
                if (!modal) {
                    modal = document.createElement('div');
                    modal.className = 'modal fade';
                    modal.id = 'appointmentModal';
                    modal.innerHTML = `
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Termin</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="appointmentForm">
                                        <input type="hidden" id="appointmentId">
                                        <div class="mb-3">
                                            <label for="appointmentTitle" class="form-label">Titel</label>
                                            <input type="text" class="form-control" id="appointmentTitle" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="appointmentStart" class="form-label">Start</label>
                                            <input type="datetime-local" class="form-control" id="appointmentStart" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="appointmentEnd" class="form-label">Ende</label>
                                            <input type="datetime-local" class="form-control" id="appointmentEnd" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="appointmentDescription" class="form-label">Beschreibung</label>
                                            <textarea class="form-control" id="appointmentDescription" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                                    <button type="button" class="btn btn-danger" id="deleteAppointment" style="display: none;">Löschen</button>
                                    <button type="button" class="btn btn-primary" id="saveAppointment">Speichern</button>
                                </div>
                            </div>
                        </div>
                    `;
                    document.body.appendChild(modal);
                    
                    // Event Listeners für Modal-Buttons
                    document.getElementById('saveAppointment').addEventListener('click', saveAppointment);
                    document.getElementById('deleteAppointment').addEventListener('click', deleteAppointment);
                }
                
                // Modal befüllen
                if (event) {
                    // Bearbeitungsmodus
                    document.getElementById('appointmentId').value = event.id;
                    document.getElementById('appointmentTitle').value = event.title;
                    document.getElementById('appointmentStart').value = event.start.toISOString().slice(0, 16);
                    document.getElementById('appointmentEnd').value = event.end.toISOString().slice(0, 16);
                    document.getElementById('appointmentDescription').value = event.extendedProps.description || '';
                    document.getElementById('deleteAppointment').style.display = 'block';
                } else {
                    // Neuer Termin
                    document.getElementById('appointmentForm').reset();
                    document.getElementById('appointmentId').value = '';
                    document.getElementById('appointmentStart').value = start.toISOString().slice(0, 16);
                    document.getElementById('appointmentEnd').value = end.toISOString().slice(0, 16);
                    document.getElementById('deleteAppointment').style.display = 'none';
                }
                
                // Modal anzeigen
                const bsModal = new bootstrap.Modal(modal);
                bsModal.show();
            }
            
            // Termin speichern
            function saveAppointment() {
                const form = document.getElementById('appointmentForm');
                const appointmentId = document.getElementById('appointmentId').value;
                
                const data = {
                    title: document.getElementById('appointmentTitle').value,
                    start: document.getElementById('appointmentStart').value,
                    end: document.getElementById('appointmentEnd').value,
                    description: document.getElementById('appointmentDescription').value,
                    container: {{ container.id }}
                };
                
                const url = appointmentId 
                    ? '/ksbdueren/public/api/container-appointments/' + appointmentId 
                    : '/ksbdueren/public/api/container-appointments';
                const method = appointmentId ? 'PUT' : 'POST';
                
                fetch(url, {
                    method: method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                    } else {
                        bootstrap.Modal.getInstance(document.getElementById('appointmentModal')).hide();
                        calendarInstance.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Speichern des Termins.');
                });
            }
            
            // Termin löschen
            function deleteAppointment() {
                if (!confirm('Möchten Sie diesen Termin wirklich löschen?')) {
                    return;
                }
                
                const appointmentId = document.getElementById('appointmentId').value;
                
                fetch('/ksbdueren/public/api/container-appointments/' + appointmentId, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                    } else {
                        bootstrap.Modal.getInstance(document.getElementById('appointmentModal')).hide();
                        calendarInstance.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Löschen des Termins.');
                });
            }
            
            // Termin aktualisieren (Drag & Drop)
            function updateAppointment(event) {
                const data = {
                    title: event.title,
                    start: event.start.toISOString(),
                    end: event.end.toISOString(),
                    container: {{ container.id }}
                };
                
                fetch('/ksbdueren/public/api/container-appointments/' + event.id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                        calendarInstance.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Aktualisieren des Termins.');
                    calendarInstance.refetchEvents();
                });
            }
            
            // Event Listener für Tab-Wechsel
            if (kalenderTab) {
                kalenderTab.addEventListener('shown.bs.tab', function() {
                    if (!calendarInstance && calendarContainer) {
                        loadCalendarLibrary().then(() => {
                            initContainerCalendar();
                        });
                    }
                });
            }

            // Dokumenten-Manager
            const dokumenteTab = document.getElementById('dokumente-tab');
            let documentManagerInitialized = false;
            
            if (dokumenteTab) {
                dokumenteTab.addEventListener('shown.bs.tab', function() {
                    if (!documentManagerInitialized) {
                        // Laden Sie das Script nur einmal
                        const script = document.createElement('script');
                        script.src = '{{ asset('js/container-documents.js') }}';
                        script.onload = function() {
                            docManager = new ContainerDocumentsManager({{ container.id }});
                            documentManagerInitialized = true;
                        };
                        document.head.appendChild(script);
                    }
                });
            }
        });
    </script>

<style>
.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.container-status {
    margin-left: 1rem;
}

.section-title {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
}

.section-divider {
    margin: 1rem 0;
    border-color: #e9ecef;
}

.container-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #2c3e50;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #2c3e50;
    background-color: #fff;
    border-bottom: 3px solid #2c3e50;
}

.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
}

.iframe-placeholder {
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.table {
    margin-bottom: 0;
}

.table td {
    vertical-align: middle;
}

.form-control:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.btn-primary {
    background-color: #2c3e50;
    border-color: #2c3e50;
}

.btn-primary:hover {
    background-color: #1a252f;
    border-color: #1a252f;
}
</style>

{% endblock %}