{% extends "base.html" %}

{% block content %}
<div class="dashboard">
    <h1>Dashboard</h1>
    
    <div class="dashboard-summary">
        <div class="summary-card">
            <div class="card-icon">
                <i class="fas fa-euro-sign"></i>
            </div>
            <div class="card-content">
                <h3>Gesamtausgaben</h3>
                <p class="amount">{{ "%.2f"|format(total_expenses) }} €</p>
            </div>
        </div>
        
        <div class="summary-card">
            <div class="card-icon">
                <i class="fas fa-calendar-alt"></i>
            </div>
            <div class="card-content">
                <h3>Aktuelle Periode</h3>
                <p>{{ now.strftime('%B %Y') }}</p>
            </div>
        </div>
        
        <div class="summary-card">
            <div class="card-icon">
                <i class="fas fa-tags"></i>
            </div>
            <div class="card-content">
                <h3>Kategorien</h3>
                <p>{{ categories|length }}</p>
            </div>
        </div>
    </div>
    
    <div class="dashboard-charts">
        <div class="chart-container">
            <h2>Ausgaben nach Kategorie</h2>
            <div id="category-chart"></div>
        </div>
    </div>
    
    <div class="recent-expenses">
        <h2>Neueste Ausgaben</h2>
        <table>
            <thead>
                <tr>
                    <th>Datum</th>
                    <th>Beschreibung</th>
                    <th>Kategorie</th>
                    <th>Betrag</th>
                </tr>
            </thead>
            <tbody>
                {% for expense in expenses %}
                <tr>
                    <td>{{ expense.date.strftime('%d.%m.%Y') }}</td>
                    <td>{{ expense.description }}</td>
                    <td>{{ expense.category.name }}</td>
                    <td class="amount">{{ "%.2f"|format(expense.amount) }} €</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="no-data">Keine Ausgaben vorhanden</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="action-button">
            <a href="{{ url_for('expenses') }}" class="button">Alle Ausgaben anzeigen</a>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Category pie chart
        const categoryNames = {{ category_names|safe }};
        const categoryAmounts = {{ category_amounts|safe }};
        
        if (categoryNames.length > 0) {
            const data = [{
                values: categoryAmounts,
                labels: categoryNames,
                type: 'pie',
                marker: {
                    colors: [
                        '#4e79a7', '#f28e2c', '#e15759', '#76b7b2', 
                        '#59a14f', '#edc949', '#af7aa1', '#ff9da7', 
                        '#9c755f', '#bab0ab'
                    ]
                }
            }];
            
            const layout = {
                height: 400,
                margin: { t: 0, b: 0, l: 0, r: 0 },
                showlegend: true
            };
            
            Plotly.newPlot('category-chart', data, layout);
        } else {
            document.getElementById('category-chart').innerHTML = '<p class="no-data">Keine Daten verfügbar</p>';
        }
    });
</script>
{% endblock %}