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

{% block title %}{{ group ? 'Gruppe bearbeiten' : 'Neue Gruppe erstellen' }} - Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <a href="{{ path('app_hat_sensor_groups') }}">HAT Sensor-Gruppen</a>
        <i class="fas fa-chevron-right"></i>
        <span>{{ group ? 'Bearbeiten' : 'Neu' }}</span>
    </div>
    <div class="page-title">
        <i class="fas fa-{{ group ? 'edit' : 'plus' }}"></i>
        <h2>{{ group ? 'Gruppe bearbeiten' : 'Neue Gruppe erstellen' }}</h2>
    </div>
</div>

<div class="d-none" data-load-url="{{ path('app_hat_sensor_group_load_sensors') }}" aria-hidden="true"></div>
<form method="post" id="group-form" class="form-max-w">
    <div class="status-card">
        <div class="card-header">
            <h3>Gruppen-Informationen</h3>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label>Datalogger *</label>
                <div class="form-row">
                    <div class="flex-1">
                        <select name="datalogger_id" id="hat-sensor-group-datalogger-select" required class="select-full">
                            <option value="">-- Bitte wählen --</option>
                            {% for datalogger in dataloggers %}
                                <option value="{{ datalogger.id }}" {% if selectedDatalogger and selectedDatalogger.id == datalogger.id %}selected{% endif %}>{{ datalogger.name }}{% if datalogger.location %} ({{ datalogger.location }}){% endif %}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="button" class="btn btn-secondary whitespace-nowrap" id="load-sensors-btn"><i class="fas fa-sync-alt"></i> Sensoren laden</button>
                </div>
                <p class="form-group-hint">Wählen Sie einen Datalogger aus und klicken Sie auf "Sensoren laden", um die verfügbaren Sensoren zu sehen.</p>
            </div>
            <div class="form-group">
                <label>Name *</label>
                <input type="text" name="name" id="group-name" value="{{ group ? group.name : '' }}" required class="input-full">
            </div>
            <div class="info-box info-box--blue">
                <p><i class="fas fa-info-circle"></i> <strong>Hinweis:</strong> Eine Gruppe muss mindestens einen Temperatursensor (HAT5) und einen Drucksensor (HAT1) enthalten.</p>
            </div>
            <div class="form-group">
                <label>Beschreibung</label>
                <textarea name="description" rows="3" class="input-full">{{ group ? group.description : '' }}</textarea>
            </div>
            <div class="form-group">
                <label>Anzahl Flaschen/Behälter *</label>
                <select name="tank_count" id="tank-count" required class="select-full">
                    {% for i in 1..15 %}
                        <option value="{{ i }}" {% if group and group.tankCount == i %}selected{% elseif not group and i == 10 %}selected{% endif %}>{{ i }} Flasche{% if i != 1 %}n{% endif %}</option>
                    {% endfor %}
                </select>
                <p class="form-group-hint"><i class="fas fa-info-circle"></i> Wählen Sie die Anzahl der Flaschen/Behälter in dieser Gruppe (1-15). Diese wird für die Massenberechnung verwendet.</p>
            </div>
        </div>
    </div>

    <div class="status-card mb-15">
        <div class="card-header">
            <h3>Sensoren auswählen</h3>
        </div>
        <div class="card-body">
            <div id="sensor-selection-container">
                {% if not selectedDatalogger %}
                    <div class="section-empty">
                        <i class="fas fa-info-circle icon-xl"></i>
                        <p>Bitte wählen Sie zuerst einen Datalogger aus, um die verfügbaren Sensoren zu sehen.</p>
                    </div>
                {% else %}
                    {% if availableSensors is not defined %}
                        {% set availableSensors = {'temperature': [], 'pressure': []} %}
                    {% endif %}
                    
                    {% if selectedDatalogger %}
                        <div class="selected-datalogger-info">
                            <strong>Datalogger:</strong> {{ selectedDatalogger.name }}{% if selectedDatalogger.location %} ({{ selectedDatalogger.location }}){% endif %}
                            <div class="form-group-hint"><i class="fas fa-info-circle"></i> Gefunden: {{ availableSensors.temperature|length }} Temperatur-Sensoren, {{ availableSensors.pressure|length }} Druck-Sensoren</div>
                        </div>
                    {% endif %}
                    <div id="temperature-sensors" class="mb-15">
                        <h4 class="settings-label alarm-type-title-row">
                            <i class="fas fa-thermometer-half card-icon-danger"></i>
                            Temperatursensoren (HAT5) *
                        </h4>
                        <p class="help-text">Wählen Sie mindestens einen Temperatursensor aus:</p>
                        <div class="sensors-grid">
                            {% if availableSensors.temperature is defined and availableSensors.temperature is not empty %}
                                {% for sensor in availableSensors.temperature %}
                                <label class="sensor-label-card">
                                    <input type="checkbox" class="sensor-checkbox" data-hat="{{ sensor.hatName }}" data-stack="{{ sensor.stack ?? 'null' }}" data-channel="{{ sensor.channel ?? 'null' }}"
                                           {% if group %}{% for groupSensor in group.sensors %}{% if groupSensor.hatName == sensor.hatName and groupSensor.stack == sensor.stack and groupSensor.channel == sensor.channel %} checked{% endif %}{% endfor %}{% endif %}>
                                    <div class="flex-1">
                                        <div class="datalogger-card-title">{{ sensor.hatName }}</div>
                                        <div class="datalogger-card-sub">{% if sensor.stack is not null %}Stack {{ sensor.stack }}{% endif %}{% if sensor.channel is not null %} · Channel {{ sensor.channel }}{% endif %}{% if sensor.unit %} · {{ sensor.unit }}{% endif %}</div>
                                        <div class="datalogger-card-sub mt-quarter"><i class="fas fa-server"></i> {{ sensor.datalogger }}</div>
                                    </div>
                                </label>
                                {% endfor %}
                            {% else %}
                                <p class="section-empty grid-col-full">
                                    <i class="fas fa-info-circle icon-lg"></i>
                                    Keine Temperatursensoren verfügbar. Stellen Sie sicher, dass: der Datalogger erreichbar ist, HAT5-Sensoren vorhanden sind, die Sensoren nicht versteckt sind.
                                </p>
                            {% endif %}
                        </div>
                    </div>
                    <div id="pressure-sensors">
                        <h4 class="settings-label alarm-type-title-row">
                            <i class="fas fa-tachometer-alt card-icon-blue"></i>
                            Drucksensoren (HAT1) *
                        </h4>
                        <p class="help-text">Wählen Sie mindestens einen Drucksensor aus:</p>
                        <div class="sensors-grid">
                            {% if availableSensors.pressure is defined and availableSensors.pressure is not empty %}
                                {% for sensor in availableSensors.pressure %}
                                <label class="sensor-label-card">
                                    <input type="checkbox" class="sensor-checkbox" data-hat="{{ sensor.hatName }}" data-stack="{{ sensor.stack ?? 'null' }}" data-channel="{{ sensor.channel ?? 'null' }}"
                                           {% if group %}{% for groupSensor in group.sensors %}{% if groupSensor.hatName == sensor.hatName and groupSensor.stack == sensor.stack and groupSensor.channel == sensor.channel %} checked{% endif %}{% endfor %}{% endif %}>
                                    <div class="flex-1">
                                        <div class="datalogger-card-title">{{ sensor.hatName }}</div>
                                        <div class="datalogger-card-sub">{% if sensor.stack is not null %}Stack {{ sensor.stack }}{% endif %}{% if sensor.channel is not null %} · Channel {{ sensor.channel }}{% endif %}{% if sensor.unit %} · {{ sensor.unit }}{% endif %}</div>
                                        <div class="datalogger-card-sub mt-quarter"><i class="fas fa-server"></i> {{ sensor.datalogger }}</div>
                                    </div>
                                </label>
                                {% endfor %}
                            {% else %}
                                <p class="section-empty grid-col-full">
                                    <i class="fas fa-info-circle icon-lg"></i>
                                    Keine Drucksensoren verfügbar. Stellen Sie sicher, dass: der Datalogger erreichbar ist, HAT1-Sensoren vorhanden sind, die Sensoren nicht versteckt sind.
                                </p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
            {% if selectedDatalogger and app.environment == 'dev' %}
                <div class="info-box info-box--warning mt-1 text-sm"><strong>Debug:</strong> Temperatur: {{ availableSensors.temperature|length }}, Druck: {{ availableSensors.pressure|length }}</div>
            {% endif %}
            <input type="hidden" name="sensors" id="sensors-json" value="{{ group ? (group.sensors|json_encode) : '[]' }}" required>
            <div id="validation-message" class="validation-message"></div>
            
            {% if selectedDatalogger %}
                <input type="hidden" name="datalogger_id" value="{{ selectedDatalogger.id }}">
            {% endif %}
        </div>
    </div>

    <div class="status-card mb-15">
        <div class="card-header">
            <h3>Anzeige-Optionen</h3>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="show_average" value="1" {{ group and group.showAverage ? 'checked' : 'checked' }}>
                    <span>Durchschnitt anzeigen</span>
                </label>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="show_individual" value="1" {{ group and group.showIndividual ? 'checked' : 'checked' }}>
                    <span>Einzelne Sensoren anzeigen</span>
                </label>
            </div>
            {% if group %}
            <div>
                <label class="checkbox-label">
                    <input type="checkbox" name="active" value="1" {{ group.active ? 'checked' : '' }}>
                    <span>Aktiv</span>
                </label>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="status-card mb-15">
        <div class="card-header">
            <h3><i class="fas fa-bell card-icon-danger"></i> Basis-Alarm-Schwellenwerte</h3>
        </div>
        <div class="card-body">
            <div class="info-box info-box--blue">
                <p><i class="fas fa-info-circle"></i> <strong>Hinweis:</strong> Die erweiterten Alarmtypen (Sensor-Abweichung, Leckage, etc.) können Sie in der <a href="{{ path('app_alarm_config') }}" class="card-icon-blue underline">Alarm-Konfiguration</a> einstellen.</p>
            </div>
            <div class="form-grid-2 mt-1 gap-1-5">
                <div class="info-box info-box--leakage">
                    <h4 class="settings-label settings-label-mb"><i class="fas fa-thermometer-half card-icon-danger"></i> Temperatur-Schwellenwerte (°C)</h4>
                    <div class="form-grid-2">
                        <div><label class="settings-label">Minimum</label><input type="number" step="0.1" name="temp_min" id="temp-min" value="{{ group and group.alarmThresholds and group.alarmThresholds.temperature and group.alarmThresholds.temperature.min is defined ? group.alarmThresholds.temperature.min : '' }}" placeholder="z.B. 0" class="input-full"></div>
                        <div><label class="settings-label">Maximum</label><input type="number" step="0.1" name="temp_max" id="temp-max" value="{{ group and group.alarmThresholds and group.alarmThresholds.temperature and group.alarmThresholds.temperature.max is defined ? group.alarmThresholds.temperature.max : '' }}" placeholder="z.B. 100" class="input-full"></div>
                    </div>
                </div>
                <div class="info-box info-box--blue">
                    <h4 class="settings-label settings-label-mb"><i class="fas fa-tachometer-alt card-icon-blue"></i> Druck-Schwellenwerte (bar)</h4>
                    <div class="form-grid-2">
                        <div><label class="settings-label">Minimum</label><input type="number" step="0.1" name="pressure_min" id="pressure-min" value="{{ group and group.alarmThresholds and group.alarmThresholds.pressure and group.alarmThresholds.pressure.min is defined ? group.alarmThresholds.pressure.min : '' }}" placeholder="z.B. 0" class="input-full"></div>
                        <div><label class="settings-label">Maximum</label><input type="number" step="0.1" name="pressure_max" id="pressure-max" value="{{ group and group.alarmThresholds and group.alarmThresholds.pressure and group.alarmThresholds.pressure.max is defined ? group.alarmThresholds.pressure.max : '' }}" placeholder="z.B. 20" class="input-full"></div>
                    </div>
                </div>
            </div>
            <div class="info-box info-box--warning mt-1">
                <p><i class="fas fa-info-circle"></i> <strong>Hinweis:</strong> Wenn ein Wert außerhalb der Schwellenwerte liegt, wird ein Alarm ausgelöst. Leere Felder werden ignoriert (keine Schranke).</p>
            </div>
        </div>
    </div>

    <div class="step-nav">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Speichern</button>
        <a href="{{ path('app_hat_sensor_groups') }}" class="btn btn-secondary"><i class="fas fa-times"></i> Abbrechen</a>
    </div>
</form>

<script>
window.APP_HAT_SENSOR_GROUP = {
    loadUrl: (function(){ var el = document.querySelector('[data-load-url]'); return el ? el.getAttribute('data-load-url') : ''; })(),
    existingSensors: {{ group ? group.sensors|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw : '[]' }}
};
</script>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/hat-sensor-group-form.js') }}?v={{ 'now'|date('YmdHis') }}"></script>
{% endblock %}