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

{% block title %}Statistiken{% endblock %}

{% block body %}
<div class="page-wrapper">
    <div class="page-header">
        <div class="header-content">
            <h1><i class="fas fa-chart-bar"></i> Statistiken & Analysen</h1>
            <p class="header-subtitle">Umfassende Übersicht über alle Aufträge</p>
        </div>
    </div>

    <!-- Haupt-Statistiken -->
    <div class="stats-grid">
        <div class="stat-card stat-total">
            <div class="stat-icon">
                <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Gesamt</div>
                <div class="stat-value">{{ gesamtAuftraege }}</div>
            </div>
        </div>

        <div class="stat-card stat-neu">
            <div class="stat-icon">
                <i class="fas fa-plus-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Neue Aufträge</div>
                <div class="stat-value">{{ statusStats.neu }}</div>
            </div>
        </div>

        <div class="stat-card stat-in-arbeit">
            <div class="stat-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">In Arbeit</div>
                <div class="stat-value">{{ statusStats.in_arbeit }}</div>
            </div>
        </div>

        <div class="stat-card stat-wartend">
            <div class="stat-icon">
                <i class="fas fa-pause-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Wartend</div>
                <div class="stat-value">{{ statusStats.wartend }}</div>
            </div>
        </div>

        <div class="stat-card stat-fertig">
            <div class="stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Fertig</div>
                <div class="stat-value">{{ statusStats.fertig }}</div>
            </div>
        </div>

        <div class="stat-card stat-abgerechnet">
            <div class="stat-icon">
                <i class="fas fa-euro-sign"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Abgerechnet</div>
                <div class="stat-value">{{ statusStats.abgerechnet }}</div>
            </div>
        </div>
    </div>

    <!-- Finanz-Übersicht -->
    <div class="finance-grid">
        <div class="finance-card finance-total">
            <div class="finance-icon">
                <i class="fas fa-coins"></i>
            </div>
            <div class="finance-content">
                <div class="finance-label">Gesamtumsatz</div>
                <div class="finance-value">{{ gesamtBetrag|number_format(2, ',', '.') }} €</div>
            </div>
        </div>

        <div class="finance-card finance-billed">
            <div class="finance-icon">
                <i class="fas fa-check-double"></i>
            </div>
            <div class="finance-content">
                <div class="finance-label">Abgerechnet</div>
                <div class="finance-value">{{ abgerechnetBetrag|number_format(2, ',', '.') }} €</div>
            </div>
        </div>

        <div class="finance-card finance-open">
            <div class="finance-icon">
                <i class="fas fa-hourglass-half"></i>
            </div>
            <div class="finance-content">
                <div class="finance-label">Offen</div>
                <div class="finance-value">{{ offenBetrag|number_format(2, ',', '.') }} €</div>
            </div>
        </div>
    </div>

    <!-- Hauptbereich mit Statistiken -->
    <div class="statistics-grid">
        <!-- Zeitbasierte Statistiken -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-clock"></i>
                <h2>Zeitliche Übersicht</h2>
            </div>
            <div class="card-content">
                <div class="status-list">
                    <div class="status-item">
                        <div class="status-indicator stats-status-indicator-overdue"></div>
                        <div class="status-info">
                            <div class="status-name">Überfällig</div>
                            <div class="status-count">{{ ueberfaellig }} Aufträge</div>
                        </div>
                        <div class="status-badge stats-status-badge-overdue">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator stats-status-indicator-faellig-heute"></div>
                        <div class="status-info">
                            <div class="status-name">Fällig heute</div>
                            <div class="status-count">{{ faelligHeute }} Aufträge</div>
                        </div>
                        <div class="status-badge stats-status-badge-faellig-heute">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator stats-status-indicator-diese-woche"></div>
                        <div class="status-info">
                            <div class="status-name">Diese Woche erstellt</div>
                            <div class="status-count">{{ neueDieseWoche }} Aufträge</div>
                        </div>
                        <div class="status-badge stats-status-badge-diese-woche">
                            <i class="fas fa-calendar-week"></i>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator stats-status-indicator-dieser-monat"></div>
                        <div class="status-info">
                            <div class="status-name">Diesen Monat erstellt</div>
                            <div class="status-count">{{ neueDieserMonat }} Aufträge</div>
                        </div>
                        <div class="status-badge stats-status-badge-dieser-monat">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator stats-status-indicator-dauer"></div>
                        <div class="status-info">
                            <div class="status-name">⌀ Bearbeitungszeit</div>
                            <div class="status-count">{{ durchschnittsDauer }} Minuten</div>
                        </div>
                        <div class="status-badge stats-status-badge-dauer">
                            <i class="fas fa-stopwatch"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Prioritäten -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-flag"></i>
                <h2>Nach Priorität</h2>
            </div>
            <div class="card-content">
                <div class="chart-bars">
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Dringend</span>
                            <strong>{{ priorityStats.dringend }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-dringend" style="--bar-width: {{ gesamtAuftraege > 0 ? (priorityStats.dringend / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Hoch</span>
                            <strong>{{ priorityStats.hoch }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-hoch" style="--bar-width: {{ gesamtAuftraege > 0 ? (priorityStats.hoch / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Mittel</span>
                            <strong>{{ priorityStats.mittel }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-mittel" style="--bar-width: {{ gesamtAuftraege > 0 ? (priorityStats.mittel / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Niedrig</span>
                            <strong>{{ priorityStats.niedrig }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-niedrig" style="--bar-width: {{ gesamtAuftraege > 0 ? (priorityStats.niedrig / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kategorien -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-tags"></i>
                <h2>Nach Kategorie</h2>
            </div>
            <div class="card-content">
                <div class="chart-bars">
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Wartung</span>
                            <strong>{{ kategorieStats.wartung }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-wartung" style="--bar-width: {{ gesamtAuftraege > 0 ? (kategorieStats.wartung / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Reparatur</span>
                            <strong>{{ kategorieStats.reparatur }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-reparatur" style="--bar-width: {{ gesamtAuftraege > 0 ? (kategorieStats.reparatur / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Installation</span>
                            <strong>{{ kategorieStats.installation }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-installation" style="--bar-width: {{ gesamtAuftraege > 0 ? (kategorieStats.installation / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Inspektion</span>
                            <strong>{{ kategorieStats.inspektion }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-inspektion" style="--bar-width: {{ gesamtAuftraege > 0 ? (kategorieStats.inspektion / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="chart-bar-item">
                        <div class="chart-bar-label">
                            <span>Sonstiges</span>
                            <strong>{{ kategorieStats.sonstiges }}</strong>
                        </div>
                        <div class="chart-bar-bg">
                            <div class="chart-bar-fill chart-bar-fill-sonstiges" style="--bar-width: {{ gesamtAuftraege > 0 ? (kategorieStats.sonstiges / gesamtAuftraege * 100) : 0 }}%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Mitarbeiter -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-user-tie"></i>
                <h2>Top 10 Mitarbeiter</h2>
            </div>
            <div class="card-content">
                <div class="ranking-list">
                    {% for mitarbeiter in mitarbeiterStats %}
                        <div class="ranking-item">
                            <div class="ranking-position">{{ loop.index }}</div>
                            <div class="ranking-info">
                                <div class="ranking-name">{{ mitarbeiter.firstName }} {{ mitarbeiter.lastName }}</div>
                            </div>
                            <div class="ranking-value">{{ mitarbeiter.anzahl }} Aufträge</div>
                        </div>
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-users-slash"></i>
                            <p>Keine Daten verfügbar</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Top Kunden -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-building"></i>
                <h2>Top 10 Kunden</h2>
            </div>
            <div class="card-content">
                <div class="ranking-list">
                    {% for kunde in kundenStats %}
                        <div class="ranking-item">
                            <div class="ranking-position">{{ loop.index }}</div>
                            <div class="ranking-info">
                                <div class="ranking-name">{{ kunde.name }}</div>
                            </div>
                            <div class="ranking-value">{{ kunde.anzahl }} Aufträge</div>
                        </div>
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-store-slash"></i>
                            <p>Keine Daten verfügbar</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Top Tags -->
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-tag"></i>
                <h2>Meistgenutzte Tags</h2>
            </div>
            <div class="card-content">
                <div class="tag-cloud">
                    {% for tag in tagStats %}
                        {% if tag.anzahl > 0 %}
                            <div class="tag-cloud-item" style="--tag-color: {{ tag.farbe }};">
                                <i class="fas fa-tag"></i>
                                {{ tag.name }}
                                <span class="tag-count">{{ tag.anzahl }}</span>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-tags"></i>
                            <p>Keine Tags verwendet</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}