{% extends "base.html" %}
{% block title %}تموين — GSPARC Mezzouna{% endblock %}
{% block content %}

<div style="display:flex; justify-content:space-between; margin-bottom:1rem;">
    <h2>⛽ تسجيل تموين جديد</h2>
    <a href="/fuel?ocr=1" class="btn btn-warning">📷 مسح إيصال</a>
</div>

{% if ocr_text %}
<!-- Résultat OCR -->
<div class="card">
    <h2>نتيجة المسح الضوئي</h2>
    <div class="ocr-box">{{ ocr_text }}</div>
    {% if ocr_parsed %}
    <div style="margin-top:1rem;">
        <span class="badge badge-success">تم استخراج: {{ ocr_parsed.الكمية }}L {{ ocr_parsed.المنتج }}</span>
    </div>
    {% endif %}
</div>
{% endif %}

<div class="card">
    <h2>بيانات التموين</h2>
    <form method="POST" action="/fuel/add">
        <div class="form-row">
            <div class="form-group">
                <label>العربة *</label>
                <select name="matricule" required>
                    <option value="">-- اختر العربة --</option>
                    {% for v in vehicules %}
                    <option value="{{ v.رقم_الماتريكول }}"
                        {% if ocr_parsed and ocr_parsed.رقم_الماتريكول == v.رقم_الماتريكول %}selected{% endif %}>
                        {{ v.رقم_الماتريكول }} — {{ v.النوع }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>التاريخ *</label>
                <input type="date" name="date" required
                    value="{{ ocr_parsed.التاريخ if ocr_parsed else '' }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>المنتج</label>
                <select name="produit">
                    <option value="Gasoual Normal" selected>Gasoual Normal</option>
                    <option value="Gasoual 50">Gasoual 50</option>
                    <option value="Essence Sans Plomb">Essence Sans Plomb</option>
                </select>
            </div>
            <div class="form-group">
                <label>الكمية (لتر) *</label>
                <input type="number" name="quantite" step="0.01" required
                    value="{{ ocr_parsed.الكمية if ocr_parsed else '' }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>سعر اللتر (د.ت) *</label>
                <input type="number" name="prix_litre" step="0.001" required
                    value="{{ ocr_parsed.السعر if ocr_parsed else '' }}">
            </div>
            <div class="form-group">
                <label>القيمة الجملية (د.ت) *</label>
                <input type="number" name="valeur" step="0.001" required
                    value="{{ ocr_parsed.القيمة if ocr_parsed else '' }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>العداد قبل (كم)</label>
                <input type="number" name="compteur_avant" step="1">
            </div>
            <div class="form-group">
                <label>العداد بعد (كم)</label>
                <input type="number" name="compteur_apres" step="1">
            </div>
        </div>
        <div class="form-group">
            <label>رقم الإيصال</label>
            <input type="text" name="no_recu"
                value="{{ ocr_parsed.رقم_الايصال if ocr_parsed else '' }}">
        </div>
        <button type="submit" class="btn btn-success" style="width:100%; margin-top:0.5rem;">💾 حفظ التموين</button>
    </form>
</div>

<!-- Historique -->
<div class="card">
    <h2>📋 آخر عمليات التموين</h2>
    {% if appros %}
    <table>
        <thead>
            <tr>
                <th>التاريخ</th>
                <th>الماتريكول</th>
                <th>الكمية</th>
                <th>الاستهلاك</th>
                <th>شذوذ</th>
            </tr>
        </thead>
        <tbody>
        {% for a in appros[:20] %}
        <tr>
            <td>{{ a.التاريخ }}</td>
            <td>{{ a.رقم_الماتريكول }}</td>
            <td>{{ a.الكمية_باللتر }} ل</td>
            <td>{{ a.الاستهلاك_100كم if a.الاستهلاك_100كم else "-" }}</td>
            <td>
                {% if a.شذوذ %}
                <span class="badge badge-danger">{{ a.نوع_الشذوذ }}</span>
                {% else %}
                <span class="badge badge-success">✓</span>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color:var(--text-light);">لا توجد عمليات تموين بعد.</p>
    {% endif %}
</div>

{% endblock %}