{% extends 'swimmonitor/base.html.twig' %}
{% import 'swimmonitor/_macros.html.twig' as sm %}

{% block title %}{{ container.name }}{% endblock %}

{% block breadcrumb %}
    <li><a href="{{ path('api_data') }}">Übersicht</a></li>
    <li>{{ container.name }}</li>
{% endblock %}

{% if container.id == 2 %}
    {% set photo = 'images/narwali2.jpeg' %}
{% elseif container.id == 3 %}
    {% set photo = 'images/mobi_container.jpeg' %}
{% else %}
    {% set photo = 'images/narwali1.jpg' %}
{% endif %}
{% set live = apiData|default({}) %}
{% set online = isOnline|default(false) %}

{% block page_head %}
    <div>
        <h1>{{ container.name }}</h1>
        <p class="sm-lead">
            <span class="sm-status {{ online ? 'is-ok' : 'is-alarm' }}">{{ online ? 'Online' : 'Offline' }}</span>
            {{ sm.lte(lte|default(null)) }}
            · {{ datapoints.geo_ort|default('Unbekannt') }} / {{ datapoints.geo_region|default('Unbekannt') }} / {{ datapoints.geo_land|default('Unbekannt') }}
        </p>
    </div>
    <div class="sm-page-actions">
        <a class="btn btn-secondary" href="{{ path('calendar_container', {id: container.id}) }}">Kalender öffnen</a>
    </div>
{% endblock %}

{% block content %}
{% set scene = scene|merge({assetBase: asset('container-ansicht/')}) %}
<section class="sm-ansicht" id="sm-ansicht" data-scene="{{ scene|json_encode }}">
    <div class="sm-ansicht-bar">
        <p class="sm-ansicht-kicker">Anlagenansicht</p>
        <button type="button" class="btn btn-secondary btn-sm" id="sm-ansicht-back" hidden>Gesamtansicht</button>
    </div>
    <div class="sm-ansicht-layout">
        <div class="sm-ansicht-stage">
            <div class="sm-ansicht-viewport">
                <canvas class="sm-ansicht-view"></canvas>
                <div class="sm-ansicht-pins"></div>
            </div>
            <div class="sm-ansicht-readout"></div>
        </div>
        <aside class="sm-ansicht-panel" hidden>
            <p class="sm-ansicht-kicker" data-kicker>Bereich</p>
            <h2 data-title></h2>
            <p data-lead></p>
            <ul data-list></ul>
        </aside>
    </div>
    <p class="sm-ansicht-hint">Das Modell wird geladen.</p>
</section>

<div data-sm-container-page
     data-container-id="{{ container.id }}"
     data-url-anlagendaten="{{ path('api_container_anlagendaten', {id: container.id}) }}"
     data-url-export-preview="{{ path('container_export_preview', {id: container.id}) }}"
     data-url-appointments="{{ path('api_container_appointments_list') }}"
     data-url-appointment="{{ path('api_container_appointments_update', {id: '__ID__'}) }}">

    <div class="sm-container-hero">
        <figure class="sm-container-photo">
            <img src="{{ asset(photo) }}" alt="Schwimmcontainer {{ container.name }}">
            <dl class="sm-kv">
                <dt>Typ</dt><dd>{{ container.type ?? '–' }}</dd>
                <dt>Baujahr</dt><dd>{{ container.baujahr ?? '–' }}</dd>
                <dt>Größe</dt><dd>{{ container.groesse ?? '–' }}</dd>
                <dt>Wassermenge</dt><dd>{{ container.wassermenge ?? '–' }}</dd>
            </dl>
        </figure>

        <div class="sm-container-live">
            {% if live.error is defined %}
                <div class="alert alert-warning mb-0">Live-Werte nicht verfügbar: {{ live.error }}</div>
            {% endif %}
            <div class="sm-metric-strip">
                {{ sm.metric(live, 't1', 'Temperatur', '°C', 1, true) }}
                {{ sm.metric(live, 'chlor', 'Freies Chlor', 'mg/l', 2, true) }}
                {{ sm.metric(live, 'redox', 'Redox', 'mV', 0, true) }}
                {{ sm.metric(live, 'ph', 'pH-Wert', '', 1, true) }}
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation"><button class="nav-link active" id="verlauf-tab" data-bs-toggle="tab" data-bs-target="#verlauf" type="button" role="tab" aria-controls="verlauf" aria-selected="true">Verläufe</button></li>
        <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" aria-controls="stammdaten" aria-selected="false">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" aria-controls="kalender" aria-selected="false">Kalender</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" aria-controls="datenexport" aria-selected="false">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" aria-controls="dokumente" aria-selected="false">Dokumente</button></li>
        {% if is_granted('ROLE_ADMIN') %}
            <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" aria-controls="pruefungen" aria-selected="false">Prüfungen</button></li>
        {% endif %}
        <li class="nav-item" role="presentation"><button class="nav-link" id="warnschwellen-tab" data-bs-toggle="tab" data-bs-target="#warnschwellen" type="button" role="tab" aria-controls="warnschwellen" aria-selected="false">Warnschwellen</button></li>
    </ul>

    <div class="tab-content">
        {# Verläufe #}
        <div class="tab-pane fade show active" id="verlauf" role="tabpanel" aria-labelledby="verlauf-tab">
            <section class="sm-panel">
                <div class="sm-panel-head"><h2>Verläufe</h2><span class="sm-panel-meta">letzte 24 Stunden</span></div>
                {% for chart in charts %}
                    <div class="sm-chart-block">
                        <h3>{{ chart.label }}{% if chart.unit %} <span class="sm-unit">{{ chart.unit }}</span>{% endif %}</h3>
                        <div class="sm-chart"><canvas id="chart-{{ chart.id }}"></canvas></div>
                    </div>
                {% else %}
                    <p class="sm-panel-body sm-muted">Für die letzten 24 Stunden liegt keine Messreihe vor.</p>
                {% endfor %}
            </section>
            <script type="application/json" id="sm-container-charts">{{ charts|json_encode(15)|raw }}</script>
        </div>

        {# Anlagendaten #}
        <div class="tab-pane fade" id="stammdaten" role="tabpanel" aria-labelledby="stammdaten-tab">
            <section class="sm-panel">
                <div class="sm-panel-head">
                    <h2>Anlagendaten</h2>
                    <button type="button" class="btn btn-secondary btn-sm" id="editAnlagendaten">Bearbeiten</button>
                </div>

                <div id="displayMode">
                    <dl class="sm-kv">
                        <dt>Baujahr</dt><dd>{{ container.baujahr ?? '–' }}</dd>
                        <dt>Typ</dt><dd>{{ container.type ?? '–' }}</dd>
                        <dt>Größe</dt><dd>{{ container.groesse ?? '–' }}</dd>
                        <dt>Wassermenge</dt><dd>{{ container.wassermenge ?? '–' }}</dd>
                        {% for key, value in container.customFields|default({}) %}
                            <dt>{{ key }}</dt><dd>{{ value }}</dd>
                        {% endfor %}
                    </dl>
                    {% if container.customFields is empty %}
                        <div class="sm-panel-body sm-muted">Keine zusätzlichen Felder vorhanden.</div>
                    {% endif %}
                </div>

                <div id="editMode" class="sm-panel-body" hidden>
                    <div class="sm-form">
                        <fieldset class="sm-fieldset">
                            <legend>Grunddaten</legend>
                            <div class="sm-form-grid">
                                <div><label class="form-label" for="baujahr">Baujahr</label><input type="number" class="form-control" id="baujahr" value="{{ container.baujahr ?? '' }}" placeholder="z. B. 2020"></div>
                                <div><label class="form-label" for="typ">Typ</label><input type="text" class="form-control" id="typ" value="{{ container.type ?? '' }}" placeholder="z. B. Premium"></div>
                                <div><label class="form-label" for="groesse">Größe</label><input type="text" class="form-control" id="groesse" value="{{ container.groesse ?? '' }}" placeholder="z. B. 5 × 10 m"></div>
                                <div><label class="form-label" for="wassermenge">Wassermenge</label><input type="text" class="form-control" id="wassermenge" value="{{ container.wassermenge ?? '' }}" placeholder="z. B. 50.000 l"></div>
                            </div>
                        </fieldset>

                        <fieldset class="sm-fieldset">
                            <legend>Zusätzliche Felder</legend>
                            <div id="customFieldsContainer">
                                {% for key, value in container.customFields|default({}) %}
                                    <div class="sm-custom-field custom-field-item">
                                        <input type="text" class="form-control custom-field-label" placeholder="Bezeichnung" aria-label="Bezeichnung" value="{{ key }}">
                                        <input type="text" class="form-control custom-field-value" placeholder="Wert" aria-label="Wert" value="{{ value }}">
                                        <button type="button" class="btn btn-outline-danger remove-field" aria-label="Feld entfernen"><i class="fas fa-trash"></i></button>
                                    </div>
                                {% endfor %}
                            </div>
                            <template id="customFieldTemplate">
                                <div class="sm-custom-field custom-field-item">
                                    <input type="text" class="form-control custom-field-label" placeholder="Bezeichnung" aria-label="Bezeichnung">
                                    <input type="text" class="form-control custom-field-value" placeholder="Wert" aria-label="Wert">
                                    <button type="button" class="btn btn-outline-danger remove-field" aria-label="Feld entfernen"><i class="fas fa-trash"></i></button>
                                </div>
                            </template>
                            <button type="button" class="btn btn-secondary btn-sm" id="addCustomField">Feld hinzufügen</button>
                            <div class="form-text">Zum Beispiel Hersteller, Seriennummer oder Wartungsdatum.</div>
                        </fieldset>

                        <div id="anlagendatenError" class="alert alert-danger mb-0" role="alert" hidden></div>

                        <div class="sm-form-actions">
                            <button type="button" class="btn btn-secondary" id="cancelEdit">Abbrechen</button>
                            <button type="button" class="btn btn-primary" id="saveAnlagendaten">Speichern</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        {# Kalender #}
        <div class="tab-pane fade" id="kalender" role="tabpanel" aria-labelledby="kalender-tab">
            <section class="sm-panel">
                <div class="sm-panel-head"><h2>Termine</h2><span class="sm-panel-meta">Zeitraum markieren, um einen Termin anzulegen</span></div>
                <div class="sm-container-calendar" id="calendar-container"></div>
            </section>
        </div>

        {# Datenexport #}
        <div class="tab-pane fade" id="datenexport" role="tabpanel" aria-labelledby="datenexport-tab">
            <section class="sm-panel">
                <div class="sm-panel-head"><h2>Datenexport</h2><span class="sm-panel-meta">InfluxDB</span></div>
                <div class="sm-panel-body">
                    <form id="exportForm" class="sm-form" method="POST" action="{{ path('container_export_data', {id: container.id}) }}">
                        <div class="sm-form-grid">
                            <div><label for="startDate" class="form-label">Startdatum</label><input type="date" class="form-control" id="startDate" name="startDate" required></div>
                            <div><label for="startTime" class="form-label">Startzeit</label><input type="time" class="form-control" id="startTime" name="startTime" required></div>
                            <div><label for="endDate" class="form-label">Enddatum</label><input type="date" class="form-control" id="endDate" name="endDate" required></div>
                            <div><label for="endTime" class="form-label">Endzeit</label><input type="time" class="form-control" id="endTime" name="endTime" required></div>
                        </div>

                        <fieldset class="sm-fieldset">
                            <legend>Parameter</legend>
                            <div class="sm-check-row">
                                <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>
                        </fieldset>

                        <fieldset class="sm-fieldset">
                            <legend>Format</legend>
                            <div class="sm-check-row">
                                <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">Grafik</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">CSV und Grafik</label></div>
                            </div>
                        </fieldset>

                        <div class="sm-form-actions">
                            <button type="button" class="btn btn-secondary" id="previewBtn">Vorschau</button>
                            <button type="submit" class="btn btn-primary">Daten exportieren</button>
                        </div>
                    </form>

                    <div id="previewArea" class="sm-export-preview" hidden>
                        <div id="previewStatus" class="alert alert-info" role="status"></div>
                        <div class="table-responsive" id="previewTableWrap" hidden>
                            <table class="table table-sm"><thead id="previewHead"></thead><tbody id="previewBody"></tbody></table>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        {# Dokumente #}
        <div class="tab-pane fade" id="dokumente" role="tabpanel" aria-labelledby="dokumente-tab">
            {% include 'container/_documents.html.twig' with {container: container} %}
        </div>

        {# Prüfungen #}
        {% if is_granted('ROLE_ADMIN') %}
            <div class="tab-pane fade" id="pruefungen" role="tabpanel" aria-labelledby="pruefungen-tab">
                {% include 'container/partials/_inspections.html.twig' with {container: container} %}
            </div>
        {% endif %}

        {# Warnschwellen #}
        <div class="tab-pane fade" id="warnschwellen" role="tabpanel" aria-labelledby="warnschwellen-tab">
            <section class="sm-panel">
                <div class="sm-panel-head"><h2>Warnschwellen</h2><span class="sm-panel-meta">werden an die Poolsteuerung übertragen</span></div>
                <div class="sm-panel-body">
                    <p class="sm-muted mb-0">Die Werte werden ständig geprüft. Beim Über- oder Unterschreiten verschickt das System automatisch eine Benachrichtigung.</p>
                </div>
                {{ form_start(form) }}
                    {% set units = {chlor: 'mg/l', ph: 'pH', redox: 'mV', t1: '°C'} %}
                    <table class="table sm-threshold-table">
                        <thead><tr><th>Bezeichnung</th><th class="sm-num">Wert</th></tr></thead>
                        <tbody>
                            {% for field in form %}
                                {% if field.vars.name not in ['save', '_token'] %}
                                    <tr>
                                        <td>{{ form_label(field) }}</td>
                                        <td>
                                            <div class="input-group">
                                                {{ form_widget(field, {attr: {class: 'form-control sm-num'}}) }}
                                                <span class="input-group-text">{{ units[field.vars.name|split('_')|first]|default('') }}</span>
                                            </div>
                                        </td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="sm-panel-foot">
                        {{ form_widget(form.save, {attr: {class: 'btn btn-primary'}}) }}
                    </div>
                {{ form_end(form) }}
            </section>
        </div>
    </div>
</div>

{# Termin-Dialog für den Kalender-Tab #}
<div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="appointmentModalTitle">Termin</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentForm" class="sm-form">
                    <input type="hidden" id="appointmentId">
                    <div><label for="appointmentTitle" class="form-label">Titel</label><input type="text" class="form-control" id="appointmentTitle" required></div>
                    <div>
                        <label for="appointmentType" class="form-label">Terminart</label>
                        <select class="form-select" id="appointmentType" required>
                            <option value="">Bitte wählen …</option>
                            {% for type in appointmentTypes %}<option value="{{ type.id }}">{{ type.name }}</option>{% endfor %}
                        </select>
                    </div>
                    <div class="sm-form-grid">
                        <div><label for="appointmentStart" class="form-label">Start</label><input type="datetime-local" class="form-control" id="appointmentStart" required></div>
                        <div><label for="appointmentEnd" class="form-label">Ende</label><input type="datetime-local" class="form-control" id="appointmentEnd" required></div>
                    </div>
                    <div><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-outline-danger me-auto" id="deleteAppointment" hidden>Löschen</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="saveAppointment">Speichern</button>
            </div>
        </div>
    </div>
</div>

{{ sm.metric_modal() }}
{% endblock %}

{% block vendor_stylesheets %}<link rel="stylesheet" href="{{ asset('js/vendor/fullcalendar.min.css') }}">{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/container/show.css') }}?v=20261101d">
    <link rel="stylesheet" href="{{ asset('css/container/ansicht.css') }}?v=20261101c">
    <link rel="stylesheet" href="{{ asset('css/container/inspections.css') }}?v=20261031">
{% endblock %}

{% block vendor_javascripts %}
    <script src="{{ asset('js/vendor/chart.umd.min.js') }}" defer></script>
    <script src="{{ asset('js/vendor/fullcalendar.min.js') }}" defer></script>
    <script src="{{ asset('js/vendor/fullcalendar-de.js') }}" defer></script>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/container/documents.js') }}?v=20261031" defer></script>
    <script src="{{ asset('js/container/inspections.js') }}?v=20261031" defer></script>
    <script src="{{ asset('js/pages/metric-detail.js') }}" defer></script>
    <script src="{{ asset('js/pages/container-show.js') }}?v=20261101d" defer></script>
    <script src="{{ asset('js/container/charts.js') }}?v=20261101e" defer></script>
    <script type="module" src="{{ asset('js/container/ansicht.js') }}?v=20261101c"></script>
{% endblock %}