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

{% block title %}HAT Sensor-Gruppen - 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>
        <span>HAT Sensor-Gruppen</span>
    </div>
    <div class="page-title">
        <i class="fas fa-layer-group"></i>
        <h2>HAT Sensor-Gruppen verwalten</h2>
    </div>
    <div class="admin-page-actions">
        <a href="{{ path('app_audit_log') }}" class="btn btn-secondary">
            <i class="fas fa-history"></i> Audit-Log
        </a>
        <a href="{{ path('app_alarm_email_config') }}" class="btn btn-secondary">
            <i class="fas fa-envelope"></i> E-Mail-Konfiguration
        </a>
        <a href="{{ path('app_report_schedules') }}" class="btn btn-secondary">
            <i class="fas fa-calendar-alt"></i> Report-Schedules
        </a>
    </div>
</div>

<div data-create-url="{{ path('app_hat_sensor_group_create') }}" aria-hidden="true" class="hidden"></div>
<div class="content-grid">
    <div class="content-main">
        <div class="status-card">
            <div class="card-header">
                <div class="admin-card-header">
                    <div>
                        <h3><i class="fas fa-layer-group"></i> Sensor-Gruppen</h3>
                        <p class="admin-helptext">
                            Pro Datalogger individuell konfigurierbar (Temperatur + Druck in einer Gruppe).
                        </p>
                    </div>
                    <div class="admin-toolbar">
                        <div class="admin-field">
                            <label for="hat-sensor-group-create-datalogger-select">Neue Gruppe für</label>
                            <select id="hat-sensor-group-create-datalogger-select" class="admin-select">
                                <option value="">-- Datalogger wählen --</option>
                                {% for datalogger in dataloggers|default([]) %}
                                    <option value="{{ datalogger.id }}">{{ datalogger.name }}{% if datalogger.location %} ({{ datalogger.location }}){% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <a href="#" id="create-group-btn" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Neue Gruppe
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                {% if groups|length > 0 %}
                    <div class="admin-filters">
                        <div class="admin-field">
                            <label for="hat-sensor-group-filter-datalogger">Filter Datalogger</label>
                            <select id="hat-sensor-group-filter-datalogger" class="admin-select">
                                <option value="">Alle</option>
                                {% for datalogger in dataloggers|default([]) %}
                                    <option value="{{ datalogger.id }}">{{ datalogger.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="admin-field admin-field-grow">
                            <label for="hat-sensor-group-search">Suche</label>
                            <div class="admin-search">
                                <i class="fas fa-search"></i>
                                <input id="hat-sensor-group-search" class="admin-input" type="text" placeholder="Gruppe, Datalogger, Sensor..." />
                            </div>
                        </div>
                        <div class="admin-field admin-field-compact">
                            <label>&nbsp;</label>
                            <button type="button" class="btn btn-secondary" id="reset-hat-group-filters-btn">
                                <i class="fas fa-rotate-left"></i> Zurücksetzen
                            </button>
                        </div>
                    </div>

                    <div class="table-container">
                        <table class="data-table" id="hat-sensor-groups-table">
                            <thead>
                                <tr>
                                    <th class="w-36"></th>
                                    <th>Datalogger</th>
                                    <th>Gruppe</th>
                                    <th class="text-center">Sensoren</th>
                                    <th class="text-center">Flaschen</th>
                                    <th>Status</th>
                                    <th class="text-right">Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for group in groups %}
                                {% set dl = attribute(group, 'datalogger') is defined ? group.datalogger : null %}
                                {% set sensorNames = '' %}
                                {% for sensor in group.sensors %}
                                    {% set sensorNames = sensorNames ~ ' ' ~ (sensor.hatName ?? '') %}
                                {% endfor %}
                                <tr class="hat-group-row"
                                    data-group-id="{{ group.id }}"
                                    data-datalogger-id="{{ dl ? dl.id : '' }}"
                                    data-search="{{ (group.name ~ ' ' ~ (dl ? dl.name : '') ~ ' ' ~ (dl and dl.location ? dl.location : '') ~ ' ' ~ (group.description ?: '') ~ ' ' ~ sensorNames)|lower }}"
                                >
                                    <td class="text-center">
                                        <button type="button" class="btn btn-secondary btn-icon hat-group-toggle-btn" data-group-id="{{ group.id }}" title="Sensoren anzeigen">
                                            <i class="fas fa-chevron-down" id="hat-group-toggle-icon-{{ group.id }}"></i>
                                        </button>
                                    </td>
                                    <td>
                                        {% if dl %}
                                            <div class="admin-fw">{{ dl.name }}</div>
                                            {% if dl.location %}<div class="admin-muted">{{ dl.location }}</div>{% endif %}
                                        {% else %}
                                            <span class="badge badge-danger">nicht zugeordnet</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="admin-fw">{{ group.name }}</div>
                                        {% if group.description %}<div class="admin-muted">{{ group.description }}</div>{% endif %}
                                    </td>
                                    <td class="text-center">{{ group.sensors|length }}</td>
                                    <td class="text-center">{{ group.tankCount|default(10) }}</td>
                                    <td>
                                        {% if group.active %}
                                            <span class="badge badge-success">aktiv</span>
                                        {% else %}
                                            <span class="badge badge-danger">inaktiv</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-right">
                                        <div class="admin-actions">
                                            <a href="{{ path('app_hat_sensor_group_edit', {id: group.id}) }}" class="btn btn-secondary">
                                                <i class="fas fa-edit"></i> Bearbeiten
                                            </a>
                                            <form method="post" action="{{ path('app_hat_sensor_group_delete', {id: group.id}) }}" class="admin-inline" onsubmit="return confirm('Gruppe wirklich löschen?');">
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fas fa-trash"></i> Löschen
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hat-group-details" id="hat-group-details-{{ group.id }}">
                                    <td></td>
                                    <td colspan="6">
                                        <div class="admin-details">
                                            <div class="admin-details-grid">
                                                <div>
                                                    <div class="admin-details-title">Sensoren</div>
                                                    {% if group.sensors|length > 0 %}
                                                        <ul class="admin-sensor-list">
                                                            {% for sensor in group.sensors %}
                                                                <li>
                                                                    <span class="admin-sensor-pill">{{ sensor.hatName }}</span>
                                                                    <span class="admin-muted">
                                                                        {% if sensor.stack is not null %}Stack {{ sensor.stack }}{% endif %}
                                                                        {% if sensor.channel is not null %}{% if sensor.stack is not null %} · {% endif %}Channel {{ sensor.channel }}{% endif %}
                                                                    </span>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    {% else %}
                                                        <div class="admin-muted">Keine Sensoren konfiguriert.</div>
                                                    {% endif %}
                                                </div>
                                                <div>
                                                    <div class="admin-details-title">Anzeige</div>
                                                    <div class="admin-muted">
                                                        <div><i class="fas fa-{{ group.showAverage ? 'check' : 'times' }}"></i> Durchschnitt anzeigen</div>
                                                        <div><i class="fas fa-{{ group.showIndividual ? 'check' : 'times' }}"></i> Einzelwerte anzeigen</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="admin-empty">
                        <i class="fas fa-layer-group"></i>
                        <div>
                            <div class="admin-fw">Noch keine Gruppen vorhanden</div>
                            <div class="admin-muted">Wähle oben einen Datalogger aus und erstelle die erste Gruppe.</div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}

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