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

{% block title %}Dépenses fixes{% endblock %}

{% block page_title %}Dépenses fixes{% endblock %}

{% block body %}
    <div class="row g-5 mb-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Nouvelle dépense fixe</h3></div>
                </div>
                <div class="card-body pt-0">
                    <form method="post" action="{{ path('comptabilite_depenses_fixes_nouvelle') }}" class="row g-3 align-items-end">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_nouvelle') }}">
                        <div class="col-md-6">
                            <label class="form-label">Libellé *</label>
                            <input type="text" name="libelle" placeholder="Loyer, Salaire - Aya Kouassi..." required class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Montant habituel *</label>
                            <input type="text" name="montant_habituel" required class="form-control">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Salarié (si c'est un salaire, §19.2.d)</label>
                            <select name="personnel" class="form-select">
                                <option value="0"></option>
                                {% for membre in personnel %}
                                    <option value="{{ membre.id }}">{{ membre.prenom }} {{ membre.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary">Créer</button>
                        </div>
                    </form>
                </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>Liste des dépenses fixes</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if depensesFixes is empty %}
                        <div class="text-muted">Aucune dépense fixe pour l'instant.</div>
                    {% else %}
                        <div class="d-flex flex-column gap-3">
                            {% for depenseFixe in depensesFixes %}
                                <div class="d-flex align-items-center justify-content-between border rounded p-3">
                                    <div>
                                        {{ depenseFixe.libelle }} - {{ depenseFixe.montantHabituel|montant }}
                                        {% if depenseFixe.actif %}
                                            <span class="badge badge-light-success ms-2">Actif</span>
                                        {% else %}
                                            <span class="badge badge-light ms-2">Désactivé</span>
                                        {% endif %}
                                        {% if depenseFixe.personnel %}
                                            <span class="badge badge-light-info ms-2">Salaire - {{ depenseFixe.personnel.prenom }} {{ depenseFixe.personnel.nom }}</span>
                                        {% endif %}
                                    </div>
                                    {% if depenseFixe.actif %}
                                        <form method="post" action="{{ path('comptabilite_depenses_fixes_desactiver', {id: depenseFixe.id}) }}">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_desactiver_' ~ depenseFixe.id) }}">
                                            <button type="submit" class="btn btn-light btn-sm">Désactiver</button>
                                        </form>
                                    {% else %}
                                        <form method="post" action="{{ path('comptabilite_depenses_fixes_activer', {id: depenseFixe.id}) }}">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_activer_' ~ depenseFixe.id) }}">
                                            <button type="submit" class="btn btn-light-success btn-sm">Activer</button>
                                        </form>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Nouvelle échéance</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if depensesFixesActives is empty %}
                <div class="text-muted">Aucune dépense fixe active. Créez-en une ci-dessus avant d'ajouter une échéance.</div>
            {% else %}
                <form method="post" action="{{ path('comptabilite_depenses_fixes_echeance_nouvelle') }}" class="row g-3 align-items-end">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_echeance_nouvelle') }}">
                    <div class="col-md-4">
                        <label class="form-label">Dépense fixe *</label>
                        <select name="depense_fixe" required class="form-select">
                            {% for depenseFixe in depensesFixesActives %}
                                <option value="{{ depenseFixe.id }}">{{ depenseFixe.libelle }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date d'échéance *</label>
                        <input type="date" name="date_echeance" required class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Montant *</label>
                        <input type="text" name="montant" required class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Ajouter</button>
                    </div>
                </form>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Échéances</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if echeances is empty %}
                <div class="text-muted">Aucune échéance 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>Dépense fixe</th>
                                <th>Échéance</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for echeance in echeances %}
                                <tr>
                                    <td>{{ echeance.depenseFixe.libelle }}</td>
                                    <td>{{ echeance.dateEcheance|date('d/m/Y') }}</td>
                                    <td>{{ echeance.montant|montant }}</td>
                                    <td>
                                        {% if echeance.payee %}
                                            <span class="badge badge-light-success">Payée le {{ echeance.datePaiement|date('d/m/Y') }}</span>
                                        {% else %}
                                            <span class="badge badge-light-warning">Non payée</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if echeance.payee %}
                                            <form method="post" action="{{ path('comptabilite_depenses_fixes_echeance_non_payee', {id: echeance.id}) }}">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_echeance_non_payee_' ~ echeance.id) }}">
                                                <button type="submit" class="btn btn-light btn-sm">Annuler le pointage</button>
                                            </form>
                                        {% else %}
                                            <form method="post" action="{{ path('comptabilite_depenses_fixes_echeance_payee', {id: echeance.id}) }}">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_fixes_echeance_payee_' ~ echeance.id) }}">
                                                <button type="submit" class="btn btn-light-success btn-sm">Marquer payée</button>
                                            </form>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}