{% extends "base.html" %}
{% block title %}العربات — GSPARC Mezzouna{% endblock %}
{% block content %}

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
    <h2>🚛 قائمة العربات</h2>
    <button class="btn btn-primary" onclick="document.getElementById('addForm').style.display='block'">+ إضافة</button>
</div>

<!-- Formulaire ajout -->
<div id="addForm" class="card" style="display:none;">
    <h2>إضافة عربة جديدة</h2>
    <form method="POST" action="/vehicules/add">
        <div class="form-row">
            <div class="form-group">
                <label>رقم الماتريكول *</label>
                <input type="text" name="matricule" required>
            </div>
            <div class="form-group">
                <label>النوع *</label>
                <input type="text" name="type_v" required placeholder="شاحنة إطفاء، سيارة إسعاف...">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>العلامة</label>
                <input type="text" name="marque">
            </div>
            <div class="form-group">
                <label>حمولة الخزان (لتر)</label>
                <input type="number" name="capacite" step="0.1">
            </div>
        </div>
        <div class="form-group">
            <label>ملاحظات</label>
            <textarea name="notes" rows="2"></textarea>
        </div>
        <button type="submit" class="btn btn-success">حفظ</button>
        <button type="button" class="btn" onclick="document.getElementById('addForm').style.display='none'" style="background:#999;color:white;">إلغاء</button>
    </form>
</div>

<!-- Liste -->
<div class="card">
    {% if vehicules %}
    <table>
        <thead>
            <tr>
                <th>الماتريكول</th>
                <th>النوع</th>
                <th>العلامة</th>
                <th>حمولة الخزان</th>
                <th>إجراءات</th>
            </tr>
        </thead>
        <tbody>
        {% for v in vehicules %}
        <tr>
            <td><strong>{{ v.رقم_الماتريكول }}</strong></td>
            <td>{{ v.النوع }}</td>
            <td>{{ v.العلامة if v.العلامة else "-" }}</td>
            <td>{{ v.حمولة_الخزان if v.حمولة_الخزان else "-" }}</td>
            <td>
                <form method="POST" action="/vehicules/{{ v.id }}/delete" style="display:inline;" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                    <button class="btn btn-danger btn-sm">🗑️</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color:var(--text-light);">لا توجد عربات مسجلة.</p>
    {% endif %}
</div>

{% endblock %}