{% extends 'comptabilite/_layout.html.twig' %}

{% block title %}Trésorerie{% endblock %}

{% block page_title %}Suivi de trésorerie{% endblock %}

{% block body %}
    <div class="row g-5 mb-5">
        <div class="col-md-4">
            <div class="card h-100 border border-success">
                <div class="card-body">
                    <div class="text-muted fs-7">Total entrants</div>
                    <div class="fs-1 fw-bold text-success">{{ vue.totalEntrants }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border border-danger">
                <div class="card-body">
                    <div class="text-muted fs-7">Total sortants</div>
                    <div class="fs-1 fw-bold text-danger">{{ vue.totalSortants }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border border-primary">
                <div class="card-body">
                    <div class="text-muted fs-7">Solde</div>
                    <div class="fs-1 fw-bold">{{ vue.solde|montant }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-5 mb-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-muted fs-7">Dépenses fixes dues, pas encore payées (mois en cours)</div>
                    <div class="fs-2 fw-bold">{{ vue.depensesFixesDues }}</div>
                    <a href="{{ path('comptabilite_depenses_fixes') }}" class="fs-7">Gérer les dépenses fixes &rarr;</a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 border border-warning">
                <div class="card-body">
                    <div class="text-muted fs-7">Argent réellement disponible</div>
                    <div class="fs-1 fw-bold">{{ vue.margeReelle }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Entrants</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if vue.entrantsParCategorie is empty %}
                        <div class="text-muted">Aucun entrant.</div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-3">
                                <tbody class="fw-semibold text-gray-600">
                                    {% for categorie, montant in vue.entrantsParCategorie %}
                                        <tr>
                                            <td>{{ categorie }}</td>
                                            <td class="text-end">{{ montant|montant }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Sortants</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if vue.sortantsParCategorie is empty %}
                        <div class="text-muted">Aucun sortant.</div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-3">
                                <tbody class="fw-semibold text-gray-600">
                                    {% for categorie, montant in vue.sortantsParCategorie %}
                                        <tr>
                                            <td>{{ categorie }}</td>
                                            <td class="text-end">{{ montant|montant }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}