{% extends 'base.html.twig' %}
{% block title %}{{ 'المصاريف'|trans }}{% endblock %}
{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-cash-coin"></i> {{ 'المصاريف'|trans }}</h2>
    <a href="{{ path('depense_new') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> {{ 'إضافة مصروف'|trans }}</a>
</div>

<div class="card border-0 shadow-sm mb-3">
    <div class="card-body d-flex justify-content-between align-items-center">
        <span class="text-muted">{{ 'إجمالي مصاريف الشهر الحالي'|trans }}</span>
        <span class="fs-4 fw-bold text-danger">{{ totalMoisEnCours|montant_fr }}</span>
    </div>
</div>

{% include '_partials/_list_search.html.twig' %}
<div class="card border-0 shadow-sm">
    <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th>{{ 'التاريخ'|trans }}</th>
                <th>{{ 'الوصف'|trans }}</th>
                <th>{{ 'الصنف'|trans }}</th>
                <th>{{ 'المبلغ'|trans }}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        {% for depense in depenses %}
            <tr>
                <td>{{ depense.date|date('d/m/Y') }}</td>
                <td>
                    {{ depense.libelle }}
                    {% if depense.note %}<div class="text-muted small">{{ depense.note }}</div>{% endif %}
                </td>
                <td><span class="badge bg-secondary">{{ depense.categorieLibelle|trans }}</span></td>
                <td class="text-danger fw-semibold">-{{ depense.montant|montant_fr }}</td>
                <td class="text-end">
                    <a href="{{ path('depense_edit', {id: depense.id}) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                    <form method="post" action="{{ path('depense_delete', {id: depense.id}) }}" class="d-inline" onsubmit="return confirm('{{ 'تأكيد الحذف؟'|trans|e('js') }}');">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ depense.id) }}">
                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                    </form>
                </td>
            </tr>
        {% else %}
            <tr><td colspan="5" class="text-center text-muted py-4">{{ 'لا توجد مصاريف مسجلة بعد.'|trans }}</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% include '_partials/_pagination.html.twig' %}
{% endblock %}