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

{% block title %}Caisses{% endblock %}

{% block page_title %}Caisses{% endblock %}

{% block body %}
    {% if is_granted('ROLE_DIRECTION') %}
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Nouvelle caisse</h3></div>
            </div>
            <div class="card-body pt-0">
                <form method="post" action="{{ path('comptabilite_caisses_nouvelle') }}" class="row g-3 align-items-end">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('caisses_nouvelle') }}">
                    <div class="col-md-5">
                        <label class="form-label">Nom *</label>
                        <input type="text" name="nom" placeholder="Fournitures scolaires, Uniforme, Garderie..." required class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Mode *</label>
                        <select name="mode" required class="form-select">
                            {% for mode in modes %}
                                <option value="{{ mode.value }}">{{ mode.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Créer</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Liste des caisses</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if caisses is empty %}
                <div class="text-muted">Aucune caisse pour l'instant.</div>
            {% else %}
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Nom</th>
                                <th>Mode</th>
                                <th>Entrant</th>
                                <th>Sortant</th>
                                <th>Solde</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ligne in caisses %}
                                <tr>
                                    <td>{{ ligne.caisse.nom }}</td>
                                    <td>{{ ligne.caisse.mode.label }}</td>
                                    <td>{{ ligne.solde.entrant|montant }}</td>
                                    <td>{{ ligne.solde.sortant|montant }}</td>
                                    <td class="fw-bold">{{ ligne.solde.solde|montant }}</td>
                                    <td>
                                        <a href="{{ path('comptabilite_caisse_detail', {id: ligne.caisse.id}) }}" class="btn btn-light btn-sm">Détail</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}