{% extends "base.html" %}
{% block title %}الرئيسية — GSPARC Mezzouna{% endblock %}
{% block content %}

<h2 style="margin-bottom:1rem;">📊 لوحة القيادة</h2>

<div class="stats-grid">
    <div class="stat-card">
        <div class="number">{{ total_v }}</div>
        <div class="label">عدد العربات</div>
    </div>
    <div class="stat-card success">
        <div class="number">{{ total_appro }}</div>
        <div class="label">عمليات التموين</div>
    </div>
    <div class="stat-card {% if total_anomalies > 0 %}warning{% endif %}">
        <div class="number">{{ total_anomalies }}</div>
        <div class="label">شذوذ غير معالج</div>
    </div>
</div>

<div class="card">
    <h2>🚛 نظرة عامة على العربات</h2>
    {% if stats_vehicules %}
    <table>
        <thead>
            <tr>
                <th>الماتريكول</th>
                <th>النوع</th>
                <th>عدد التموين</th>
                <th>متوسط الاستهلاك (ل/100كم)</th>
                <th>شذوذ</th>
            </tr>
        </thead>
        <tbody>
        {% for v in stats_vehicules %}
            <tr>
                <td><strong>{{ v.matricule }}</strong></td>
                <td>{{ v.type }}</td>
                <td>{{ v.nb_appros }}</td>
                <td>{{ v.conso_moyenne }}</td>
                <td>
                    {% if v.nb_anomalies > 0 %}
                    <span class="badge badge-danger">{{ v.nb_anomalies }}</span>
                    {% else %}
                    <span class="badge badge-success">✓</span>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color:var(--text-light);">لا توجد بيانات بعد. ابدأ بإدخال عملية تموين.</p>
    {% endif %}
</div>

<div style="display:flex; gap:1rem; margin-top:1rem;">
    <a href="/fuel" class="btn btn-primary">⛽ إضافة تموين جديد</a>
    <a href="/fuel?ocr=1" class="btn btn-warning">📷 مسح إيصال</a>
</div>

{% endblock %}