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

{% block title %}Dashboard{% endblock %}

{% block body %}
<div class="page-wrapper">
    <div class="page-header">
        <div class="header-content">
            <h1><i class="fas fa-chart-line"></i> Dashboard</h1>
            <p class="header-subtitle">Willkommen zurück{% if app.user %}, {{ app.user.fullName }}{% endif %}</p>
        </div>
    </div>

    <!-- Überfällige Aufträge Warnung -->
    {% if stats.ueberfaellig > 0 %}
    <div class="overdue-alert">
        <div class="alert-content">
            <div class="alert-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="alert-text">
                <strong>{{ stats.ueberfaellig }} überfällige Aufträge</strong>
                <span>Benötigen sofortige Aufmerksamkeit</span>
            </div>
            <a href="{{ path('auftrag_index') }}?overdue=1" class="btn btn-primary btn-sm">
                <i class="fas fa-arrow-right"></i> Anzeigen
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Statistik Cards -->
    <div class="stats-grid">
        {% if stats.ueberfaellig > 0 %}
        <a href="{{ path('auftrag_index', {overdue: 1}) }}" class="stat-card stat-card-link stat-overdue">
            <div class="stat-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-label">Überfällig</div>
                <div class="stat-value">{{ stats.ueberfaellig }}</div>
            </div>
        </a>
        {% endif %}
        
        <a href="{{ path('auftrag_index', {status: 'neu'}) }}" class="stat-card stat-card-link 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">{{ stats.neu }}</div>
            </div>
        </a>

        <a href="{{ path('auftrag_index', {status: 'in_arbeit'}) }}" class="stat-card stat-card-link 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">{{ stats.in_arbeit }}</div>
            </div>
        </a>

        <a href="{{ path('auftrag_index', {status: 'wartend'}) }}" class="stat-card stat-card-link 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">{{ stats.wartend }}</div>
            </div>
        </a>

        <a href="{{ path('auftrag_index', {status: 'fertig'}) }}" class="stat-card stat-card-link 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">{{ stats.fertig }}</div>
            </div>
        </a>

        <a href="{{ path('auftrag_index', {status: 'abgerechnet'}) }}" class="stat-card stat-card-link 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">{{ stats.abgerechnet }}</div>
            </div>
        </a>

        <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">{{ stats.gesamt }}</div>
            </div>
        </div>
    </div>

    <!-- Schnellzugriff -->
    <div class="dashboard-grid">
        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-bolt"></i>
                <h2>Schnellzugriff</h2>
            </div>
            <div class="card-content">
                <div class="quick-actions">
                    <a href="{{ path('auftrag_new') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Neuer Auftrag</div>
                            <div class="quick-action-desc">Auftrag erstellen</div>
                        </div>
                    </a>
                    <a href="{{ path('auftrag_index') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-list"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Alle Aufträge</div>
                            <div class="quick-action-desc">Aufträge anzeigen</div>
                        </div>
                    </a>
                    <a href="{{ path('auftrag_kalender') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-calendar"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Kalender</div>
                            <div class="quick-action-desc">Terminübersicht</div>
                        </div>
                    </a>
                    <a href="{{ path('kunde_index') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Kunden</div>
                            <div class="quick-action-desc">Kundenverwaltung</div>
                        </div>
                    </a>
                    <a href="{{ path('material_index') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-boxes"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Materialien</div>
                            <div class="quick-action-desc">Lagerverwaltung</div>
                        </div>
                    </a>
                    <a href="{{ path('user_index') }}" class="quick-action">
                        <div class="quick-action-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="quick-action-text">
                            <div class="quick-action-title">Benutzer</div>
                            <div class="quick-action-desc">Benutzerverwaltung</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="dashboard-card">
            <div class="card-header">
                <i class="fas fa-exclamation-circle"></i>
                <h2>Status-Übersicht</h2>
            </div>
            <div class="card-content">
                <div class="status-list">
                    <div class="status-item">
                        <div class="status-indicator status-neu-bg"></div>
                        <div class="status-info">
                            <div class="status-name">Neu</div>
                            <div class="status-count">{{ stats.neu }} Aufträge</div>
                        </div>
                        <a href="{{ path('auftrag_index') }}" class="status-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator status-in-arbeit-bg"></div>
                        <div class="status-info">
                            <div class="status-name">In Arbeit</div>
                            <div class="status-count">{{ stats.in_arbeit }} Aufträge</div>
                        </div>
                        <a href="{{ path('auftrag_index') }}" class="status-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator status-wartend-bg"></div>
                        <div class="status-info">
                            <div class="status-name">Wartend</div>
                            <div class="status-count">{{ stats.wartend }} Aufträge</div>
                        </div>
                        <a href="{{ path('auftrag_index') }}" class="status-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator status-fertig-bg"></div>
                        <div class="status-info">
                            <div class="status-name">Fertig</div>
                            <div class="status-count">{{ stats.fertig }} Aufträge</div>
                        </div>
                        <a href="{{ path('auftrag_index') }}" class="status-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator status-abgerechnet-bg"></div>
                        <div class="status-info">
                            <div class="status-name">Abgerechnet</div>
                            <div class="status-count">{{ stats.abgerechnet }} Aufträge</div>
                        </div>
                        <a href="{{ path('auftrag_index') }}" class="status-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Erweiterte Widgets -->
    <div class="dashboard-widgets">
        <div class="widget-card">
            <div class="widget-header">
                <i class="fas fa-chart-pie"></i>
                <h3>Status-Verteilung</h3>
            </div>
            <div class="widget-content">
                <div class="chart-pie">
                    {% set total = stats.gesamt > 0 ? stats.gesamt : 1 %}
                    <div class="pie-segment" style="--percentage: {{ (stats.neu / total * 100)|round }}%; --color: #3b82f6;">
                        <span class="pie-label">Neu</span>
                    </div>
                    <div class="pie-segment" style="--percentage: {{ (stats.in_arbeit / total * 100)|round }}%; --color: #f59e0b;">
                        <span class="pie-label">In Arbeit</span>
                    </div>
                    <div class="pie-segment" style="--percentage: {{ (stats.wartend / total * 100)|round }}%; --color: #8b5cf6;">
                        <span class="pie-label">Wartend</span>
                    </div>
                    <div class="pie-segment" style="--percentage: {{ (stats.fertig / total * 100)|round }}%; --color: #10b981;">
                        <span class="pie-label">Fertig</span>
                    </div>
                    <div class="pie-segment" style="--percentage: {{ (stats.abgerechnet / total * 100)|round }}%; --color: #06b6d4;">
                        <span class="pie-label">Abgerechnet</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="widget-card">
            <div class="widget-header">
                <i class="fas fa-trending-up"></i>
                <h3>Performance</h3>
            </div>
            <div class="widget-content">
                <div class="performance-metrics">
                    <div class="metric-item">
                        <div class="metric-label">Erledigungsrate</div>
                        <div class="metric-value">
                            {% if stats.gesamt > 0 %}
                                {{ ((stats.fertig + stats.abgerechnet) / stats.gesamt * 100)|round }}%
                            {% else %}
                                0%
                            {% endif %}
                        </div>
                    </div>
                    <div class="metric-item">
                        <div class="metric-label">In Bearbeitung</div>
                        <div class="metric-value">{{ stats.in_arbeit }}</div>
                    </div>
                    <div class="metric-item">
                        <div class="metric-label">Offen</div>
                        <div class="metric-value">{{ stats.neu + stats.wartend }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="widget-card">
            <div class="widget-header">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>Überfällige Aufträge</h3>
            </div>
            <div class="widget-content">
                {% if overdueAuftraege|length > 0 %}
                <div class="overdue-list">
                    {% for auftrag in overdueAuftraege %}
                    <a href="{{ path('auftrag_show', {id: auftrag.id}) }}" class="overdue-item">
                        <div class="overdue-item-header">
                            <strong>#{{ auftrag.id }} - {{ auftrag.titel }}</strong>
                            <span class="overdue-days">
                                {% set daysDiff = (date('now').timestamp - auftrag.faelligAm.timestamp) / 86400 %}
                                {{ daysDiff|round }} Tag{{ daysDiff|round != 1 ? 'e' : '' }} überfällig
                            </span>
                        </div>
                        <div class="overdue-item-details">
                            <span class="status-badge status-{{ auftrag.status }}">{{ auftrag.status|replace({'_': ' '})|title }}</span>
                            {% if auftrag.faelligAm %}
                                <span class="overdue-date">
                                    <i class="fas fa-calendar"></i> Fällig: {{ auftrag.faelligAm|date('d.m.Y') }}
                                </span>
                            {% endif %}
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-check-circle"></i>
                    <p>Keine überfälligen Aufträge</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}