{% extends "base.html" %}

{% block title %}Dashboard - Mago4 Demo{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- First Row - KPI Cards -->
    <div class="widget-row">
        {% for widget in widgets[0] %}
        <div class="widget-card stat-card" style="border-left-color: var(--color-{{ widget.color }})">
            <div class="widget-header">
                <h3 class="widget-title">{{ widget.title }}</h3>
            </div>
            <div class="widget-body stat-body">
                <div class="stat-icon" style="color: var(--color-{{ widget.color }})">
                    <i class="material-icons">{{ widget.icon }}</i>
                </div>
                <div class="stat-value">{{ widget.value }}</div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Second Row - Data Tables -->
    <div class="widget-row">
        {% for widget in widgets[1] %}
        <div class="widget-card">
            <div class="widget-header">
                <h3 class="widget-title">{{ widget.title }}</h3>
                {% if widget.subtitle %}<p class="widget-subtitle">{{ widget.subtitle }}</p>{% endif %}
            </div>
            <div class="widget-body grid-body">
                <table class="data-table">
                    <thead>
                        <tr>
                            {% if "Vendita" in widget.title %}
                            <th>Data</th>
                            <th>Numero Ordine</th>
                            <th>Cliente</th>
                            <th>Importo</th>
                            <th>Stato</th>
                            {% else %}
                            <th>Data</th>
                            <th>Numero Ordine</th>
                            <th>Fornitore</th>
                            <th>Importo</th>
                            <th>Stato</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        {% if "Vendita" in widget.title %}
                            {% for order in widget.data.orders %}
                            <tr>
                                <td>{{ order.order_date }}</td>
                                <td><strong>{{ order.order_number }}</strong></td>
                                <td>{{ order.customer_name }}</td>
                                <td class="text-right">{{ order.total_amount }}</td>
                                <td>
                                    <span class="badge status-{{ order.status }}">{{ order.status }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        {% else %}
                            {% for order in widget.data.orders %}
                            <tr>
                                <td>{{ order.order_date }}</td>
                                <td><strong>{{ order.order_number }}</strong></td>
                                <td>{{ order.supplier_name }}</td>
                                <td class="text-right">{{ order.total_amount }}</td>
                                <td>
                                    <span class="badge status-{{ order.status }}">{{ order.status }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Summary Stats -->
    <div class="summary-stats">
        <div class="stat-summary">
            <div class="stat-label">Totale Clienti</div>
            <div class="stat-number">{{ stats.total_customers }}</div>
        </div>
        <div class="stat-summary">
            <div class="stat-label">Totale Fornitori</div>
            <div class="stat-number">{{ stats.total_suppliers }}</div>
        </div>
        <div class="stat-summary">
            <div class="stat-label">Articoli in Catalogo</div>
            <div class="stat-number">{{ stats.total_products }}</div>
        </div>
        <div class="stat-summary">
            <div class="stat-label">Debiti Fornitori</div>
            <div class="stat-number text-orange">€ {{ "%.2f"|format(stats.total_payable) }}</div>
        </div>
    </div>
</div>

{% endblock %}