{% extends 'base.html' %}

{% block title %}Status-Übersicht{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Status-Übersicht</h2>

    <div class="alert {% if space_is_open %}alert-success{% else %}alert-danger{% endif %} mb-4">
        <i class="fas {% if space_is_open %}fa-door-open{% else %}fa-door-closed{% endif %} me-2"></i>
        {% if space_is_open %}
            <strong>Space ist offen</strong>
            {% if space_open_duration %}
                <span class="ms-2">seit {{ space_open_duration.hours }} Stunden und {{ space_open_duration.minutes }} Minuten</span>
            {% endif %}
        {% else %}
            <strong>Space ist geschlossen</strong>
        {% endif %}
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="type" class="col-form-label">Typ:</label>
                </div>
                <div class="col-auto">
                    <select class="form-select" id="type" name="type" onchange="this.form.submit()">
                        <option value="">Alle</option>
                        {% for t in types %}
                        <option value="{{ t }}" {% if selected_type == t %}selected{% endif %}>{{ type_names.get(t, t) }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-auto">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="only_open" name="only_open" value="1" {% if only_open %}checked{% endif %} onchange="this.form.submit()">
                        <label class="form-check-label" for="only_open">Nur offene</label>
                    </div>
                </div>
                <div class="col-auto">
                    <label for="date_from" class="col-form-label">Von:</label>
                </div>
                <div class="col-auto">
                    <input type="date" class="form-control" id="date_from" name="date_from" value="{{ date_from }}" onchange="this.form.submit()">
                </div>
                <div class="col-auto">
                    <label for="date_to" class="col-form-label">Bis:</label>
                </div>
                <div class="col-auto">
                    <input type="date" class="form-control" id="date_to" name="date_to" value="{{ date_to }}" onchange="this.form.submit()">
                </div>
            </form>
        </div>
    </div>

    {% if duration_stats %}
    <div class="alert alert-info mb-4">
        <i class="fas fa-clock me-2"></i>
        <strong>Gesamtdauer:</strong>
        {% if duration_stats.days > 0 %}{{ duration_stats.days }} Tage, {% endif %}{{ duration_stats.hours }} Stunden, {{ duration_stats.minutes }} Minuten
        <span class="ms-3 badge bg-primary">{{ duration_stats.percentage }}%</span>
    </div>
    {% endif %}

    {% if statuses %}
    <div class="d-none d-md-block">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped mb-0">
                        <thead>
                            <tr>
                                <th>Typ</th>
                                <th>Inhalt</th>
                                <th>Status</th>
                                <th>Start</th>
                                <th>Ende</th>
                                {% if current_user and '/nbspspaceadmin' in current_user.groups %}
                                <th>Aktionen</th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for status in statuses %}
                            <tr>
                                <td><span class="badge bg-secondary">{{ type_names.get(status.type, status.type) }}</span></td>
                                <td>{{ status.content or '-' }}</td>
                                <td>
                                    {% if status.state_open %}
                                    <span class="badge bg-success">Offen</span>
                                    {% else %}
                                    <span class="badge bg-dark">Geschlossen</span>
                                    {% endif %}
                                </td>
                                <td>{% if status.start_date %}<span class="local-time" data-utc="{{ status.start_date.strftime('%Y-%m-%dT%H:%M:%SZ') }}">{{ status.start_date.strftime('%d.%m.%Y %H:%M') }}</span>{% else %}-{% endif %}</td>
                                <td>{% if status.end_date %}<span class="local-time" data-utc="{{ status.end_date.strftime('%Y-%m-%dT%H:%M:%SZ') }}">{{ status.end_date.strftime('%d.%m.%Y %H:%M') }}</span>{% else %}-{% endif %}</td>
                                {% if current_user and '/nbspspaceadmin' in current_user.groups %}
                                <td>
                                    {% if status.state_open %}
                                    <button class="btn btn-sm btn-warning" onclick="closeStatus({{ status.id }})">
                                        <i class="fas fa-times"></i> Schließen
                                    </button>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="d-md-none">
        {% for status in statuses %}
        <div class="card mb-2">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <span class="badge bg-secondary">{{ type_names.get(status.type, status.type) }}</span>
                    {% if status.state_open %}
                    <span class="badge bg-success">Offen</span>
                    {% else %}
                    <span class="badge bg-dark">Geschlossen</span>
                    {% endif %}
                </div>
                <div class="fw-bold">{{ status.content or '-' }}</div>
                <small class="text-muted">
                    {% if status.start_date %}<span class="local-time" data-utc="{{ status.start_date.strftime('%Y-%m-%dT%H:%M:%SZ') }}">{{ status.start_date.strftime('%d.%m.%Y %H:%M') }}</span>{% else %}-{% endif %}
                    {% if status.end_date %} → <span class="local-time" data-utc="{{ status.end_date.strftime('%Y-%m-%dT%H:%M:%SZ') }}">{{ status.end_date.strftime('%d.%m.%Y %H:%M') }}</span>{% endif %}
                </small>
                {% if current_user and '/nbspspaceadmin' in current_user.groups and status.state_open %}
                <div class="mt-2">
                    <button class="btn btn-sm btn-warning" onclick="closeStatus({{ status.id }})">
                        <i class="fas fa-times"></i> Schließen
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card">
        <div class="card-body">
            <p class="text-muted mb-0">Keine Status-Einträge vorhanden.</p>
        </div>
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.local-time').forEach(function(el) {
        const utc = el.dataset.utc;
        if (utc) {
            const date = new Date(utc);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            el.textContent = day + '.' + month + '.' + year + ' ' + hours + ':' + minutes;
        }
    });
});

function closeStatus(statusId) {
    fetch(`/api/status/${statusId}/close`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            const alert = document.createElement('div');
            alert.className = 'alert alert-success alert-dismissible fade show';
            alert.innerHTML = `
                <i class="fas fa-check me-2"></i>${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.container').prepend(alert);
            
            // Reload page after a short delay to show updated status
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            // Show error message
            const alert = document.createElement('div');
            alert.className = 'alert alert-danger alert-dismissible fade show';
            alert.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>Fehler: ${data.message || 'Unbekannter Fehler'}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.container').prepend(alert);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        const alert = document.createElement('div');
        alert.className = 'alert alert-danger alert-dismissible fade show';
        alert.innerHTML = `
            <i class="fas fa-exclamation-triangle me-2"></i>Netzwerkfehler beim Schließen des Status
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.querySelector('.container').prepend(alert);
    });
}
</script>
{% endblock %}