{% extends 'admin/layout.html.twig' %}
{% block title %}Dépenses{% endblock %}

{% block admin_body %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-1">Dépenses / prestations</h1>
            <p class="text-secondary mb-0">Saisis l'opération : exercice et période sont déterminés automatiquement.</p>
        </div>
        {% if can_permission('EXPENSE',2) %}
            <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#expenseModal">
                <i class="bi bi-plus-lg me-1"></i>Ajouter
            </button>
        {% endif %}
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table align-middle mb-0 data-table">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Fournisseur</th>
                    <th>Libellé</th>
                    <th>Projet</th>
                    <th>HT</th>
                    <th>TVA</th>
                    <th>TTC</th>
                    <th>Justificatif</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for e in expenses %}
                    {% set receipt = expenseDocuments[e.id] ?? null %}
                    <tr>
                        <td>{{ e.expenseDate|date('d/m/Y') }}</td>
                        <td>{{ e.supplier ?: '—' }}</td>
                        <td>{{ e.label }}</td>
                        <td>{{ e.artisticProject ? e.artisticProject.name : 'Association' }}</td>
                        <td>{{ e.amountHt|number_format(2,',',' ') }} €</td>
                        <td>{{ e.vatAmount|number_format(2,',',' ') }} €</td>
                        <td><strong>{{ e.amountTtc|number_format(2,',',' ') }} €</strong></td>
                        <td>
                            {% if receipt %}
                                <a class="btn btn-sm btn-outline-dark"
                                   href="{{ path('document_view',{id:receipt.id}) }}" target="_blank">
                                    <i class="bi bi-paperclip me-1"></i>Voir
                                </a>
                            {% else %}
                                <span class="badge text-bg-warning">Manquant</span>
                            {% endif %}
                        </td>
                        <td class="text-nowrap">
                            {% if can_permission('EXPENSE',2) %}
                                <button class="btn btn-sm btn-outline-dark" type="button" data-bs-toggle="modal"
                                        data-bs-target="#editExpenseModal{{ e.id }}" title="Modifier la dépense">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            {% endif %}
                            {% if not receipt and can_permission('EXPENSE',2) %}
                                <button class="btn btn-sm btn-warning" type="button" data-bs-toggle="modal"
                                        data-bs-target="#receiptExpenseModal{{ e.id }}" title="Ajouter le justificatif">
                                    <i class="bi bi-paperclip"></i> Ajouter justificatif
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="9" class="text-center text-secondary py-4">Aucune dépense.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if can_permission('EXPENSE',2) %}
    {# Création #}
    <div class="modal fade" id="expenseModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form class="modal-content js-expense-form" method="post" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title">Nouvelle dépense</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{ csrf_token('accounting-expense') }}">
                    <div class="row g-3">
                        <div class="col-md-4"><label class="form-label">Date</label><input class="form-control"
                                                                                           type="date"
                                                                                           name="expense_date"
                                                                                           value="{{ 'now'|date('Y-m-d') }}"
                                                                                           required></div>
                        <div class="col-md-8"><label class="form-label">Libellé</label><input class="form-control"
                                                                                              name="label" required>
                        </div>
                        <div class="col-md-6"><label class="form-label">Fournisseur / prestataire</label><input
                                class="form-control" name="supplier"></div>
                        <div class="col-md-6"><label class="form-label">Catégorie</label><select class="form-select"
                                                                                                 name="category_id">
                                <option value="">—</option>{% for c in categories %}
                                <option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}</select></div>
                        <input type="hidden" name="amount_source" class="js-amount-source" value="ht">
                        <div class="col-md-3"><label class="form-label">Montant HT</label><input
                                class="form-control js-ht" name="amount_ht" inputmode="decimal" required></div>
                        <div class="col-md-3"><label class="form-label">TVA %</label><select class="form-select js-vat"
                                                                                             name="vat_rate">{% for r in [0,2.1,5.5,10,20] %}
                                    <option>{{ r }}</option>{% endfor %}</select></div>
                        <div class="col-md-3"><label class="form-label">Montant TTC</label><input
                                class="form-control js-ttc" name="amount_ttc" inputmode="decimal"
                                placeholder="Calcul automatique"></div>
                        <div class="col-md-3"><label class="form-label">TVA déductible</label><input
                                class="form-control" name="deductible_vat" placeholder="Automatique si vide"></div>
                        <div class="col-md-6"><label class="form-label">Projet</label><select class="form-select"
                                                                                              name="project_id">
                                <option value="">Association / commun</option>{% for p in projects %}
                                <option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}</select></div>
                        <div class="col-md-6"><label class="form-label">Compte</label><select class="form-select"
                                                                                              name="account_id">
                                <option value="">—</option>{% for a in accounts %}
                                <option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}</select></div>
                        <div class="col-md-6"><label class="form-label">Mode de paiement</label><select
                                class="form-select" name="payment_method_id">
                                <option value="">—</option>{% for m in paymentMethods %}
                                <option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}</select></div>
                        <div class="col-md-6"><label class="form-label">Date de paiement</label><input
                                class="form-control" type="date" name="payment_date"></div>
                        <div class="col-12"><label class="form-label">Justificatif <span
                                    class="text-danger">*</span></label><input class="form-control" type="file"
                                                                               name="receipt" accept=".pdf,image/*"
                                                                               required>
                            <div class="form-text">Facture, ticket ou autre pièce justificative. Elle sera classée
                                automatiquement dans la GED comptable.
                            </div>
                        </div>
                        <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control"
                                                                                             name="notes"
                                                                                             rows="2"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Annuler</button>
                    <button class="btn btn-dark">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>

    {# Modification + ajout de justificatif #}
    {% for e in expenses %}
        {% set receipt = expenseDocuments[e.id] ?? null %}
        <div class="modal fade" id="editExpenseModal{{ e.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form class="modal-content js-expense-form" method="post"
                      action="{{ path('admin_accounting_expense_edit',{id:e.id}) }}">
                    <div class="modal-header">
                        <div><h5 class="modal-title mb-0">Modifier la dépense</h5>
                            <div class="small text-secondary">{{ e.label }}</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="_token" value="{{ csrf_token('accounting-expense-edit-' ~ e.id) }}">
                        <div class="row g-3">
                            <div class="col-md-4"><label class="form-label">Date</label><input class="form-control"
                                                                                               type="date"
                                                                                               name="expense_date"
                                                                                               value="{{ e.expenseDate|date('Y-m-d') }}"
                                                                                               required></div>
                            <div class="col-md-8"><label class="form-label">Libellé</label><input class="form-control"
                                                                                                  name="label"
                                                                                                  value="{{ e.label }}"
                                                                                                  required></div>
                            <div class="col-md-6"><label class="form-label">Fournisseur / prestataire</label><input
                                    class="form-control" name="supplier" value="{{ e.supplier }}"></div>
                            <div class="col-md-6"><label class="form-label">Catégorie</label><select class="form-select"
                                                                                                     name="category_id">
                                    <option value="">—</option>{% for c in categories %}
                                    <option
                                    value="{{ c.id }}" {{ e.category and e.category.id == c.id ? 'selected' : '' }}>{{ c.name }}</option>{% endfor %}
                                </select></div>
                            <input type="hidden" name="amount_source" class="js-amount-source" value="ht">
                            <div class="col-md-3"><label class="form-label">Montant HT</label><input
                                    class="form-control js-ht" name="amount_ht" inputmode="decimal"
                                    value="{{ e.amountHt|number_format(2,'.','') }}" required></div>
                            <div class="col-md-3"><label class="form-label">TVA %</label><select
                                    class="form-select js-vat" name="vat_rate">{% for r in [0,2.1,5.5,10,20] %}
                                        <option
                                        value="{{ r }}" {{ e.vatRate + 0 == r ? 'selected' : '' }}>{{ r }}</option>{% endfor %}
                                </select></div>
                            <div class="col-md-3"><label class="form-label">Montant TTC</label><input
                                    class="form-control js-ttc" name="amount_ttc" inputmode="decimal"
                                    value="{{ e.amountTtc|number_format(2,'.','') }}"></div>
                            <div class="col-md-3"><label class="form-label">TVA déductible</label><input
                                    class="form-control" name="deductible_vat"
                                    value="{{ e.deductibleVatAmount|number_format(2,'.','') }}"></div>
                            <div class="col-md-6"><label class="form-label">Projet</label><select class="form-select"
                                                                                                  name="project_id">
                                    <option value="">Association / commun</option>{% for p in projects %}
                                    <option
                                    value="{{ p.id }}" {{ e.artisticProject and e.artisticProject.id == p.id ? 'selected' : '' }}>{{ p.name }}</option>{% endfor %}
                                </select></div>
                            <div class="col-md-6"><label class="form-label">Compte</label><select class="form-select"
                                                                                                  name="account_id">
                                    <option value="">—</option>{% for a in accounts %}
                                    <option
                                    value="{{ a.id }}" {{ e.financialAccount and e.financialAccount.id == a.id ? 'selected' : '' }}>{{ a.name }}</option>{% endfor %}
                                </select></div>
                            <div class="col-md-6"><label class="form-label">Mode de paiement</label><select
                                    class="form-select" name="payment_method_id">
                                    <option value="">—</option>{% for m in paymentMethods %}
                                    <option
                                    value="{{ m.id }}" {{ e.paymentMethod and e.paymentMethod.id == m.id ? 'selected' : '' }}>{{ m.name }}</option>{% endfor %}
                                </select></div>
                            <div class="col-md-6"><label class="form-label">Date de paiement</label><input
                                    class="form-control" type="date" name="payment_date"
                                    value="{{ e.paymentDate ? e.paymentDate|date('Y-m-d') : '' }}"></div>
                            <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control"
                                                                                                 name="notes"
                                                                                                 rows="2">{{ e.notes }}</textarea>
                            </div>
                        </div>
                        {% if receipt %}
                            <div
                                class="alert alert-light border mt-3 mb-0 d-flex justify-content-between align-items-center">
                                <span><i
                                        class="bi bi-paperclip me-1"></i>Le justificatif existant est conservé.</span><a
                                    class="btn btn-sm btn-outline-dark"
                                    href="{{ path('document_view',{id:receipt.id}) }}" target="_blank">Voir</a></div>
                        {% else %}
                            <div class="alert alert-warning mt-3 mb-0"><i class="bi bi-exclamation-triangle me-1"></i>Cette
                                dépense n'a pas encore de justificatif. Utilise l'action « Ajouter justificatif » après
                                avoir enregistré les modifications.
                            </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Annuler</button>
                        <button class="btn btn-dark">Enregistrer les modifications</button>
                    </div>
                </form>
            </div>
        </div>

        {% if not receipt %}
            <div class="modal fade" id="receiptExpenseModal{{ e.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <form class="modal-content" method="post" enctype="multipart/form-data"
                          action="{{ path('admin_accounting_expense_receipt',{id:e.id}) }}">
                        <div class="modal-header"><h5 class="modal-title">Ajouter un justificatif</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="_token"
                                   value="{{ csrf_token('accounting-expense-receipt-' ~ e.id) }}">
                            <p class="mb-3"><strong>{{ e.label }}</strong><br><span
                                    class="text-secondary">{{ e.expenseDate|date('d/m/Y') }} · {{ e.amountTtc|number_format(2,',',' ') }} € TTC</span>
                            </p>
                            <label class="form-label">Justificatif <span class="text-danger">*</span></label>
                            <input class="form-control" type="file" name="receipt" accept=".pdf,image/*" required>
                            <div class="form-text">Facture, ticket ou autre pièce justificative. Le document sera classé
                                automatiquement dans {{ e.accountingPeriod.label }} {{ e.accountingYear.label }}.
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Annuler
                            </button>
                            <button class="btn btn-dark"><i class="bi bi-paperclip me-1"></i>Ajouter le justificatif
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        {% endif %}
    {% endfor %}
{% endif %}
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
    document.querySelectorAll('.js-expense-form').forEach(form => {
        const ht = form.querySelector('.js-ht'), ttc = form.querySelector('.js-ttc'),
            vat = form.querySelector('.js-vat'), source = form.querySelector('.js-amount-source');
        if (!ht || !ttc || !vat || !source) return;
        const number = v => Number(String(v || '').replace(/\s/g, '').replace(',', '.')) || 0;
        const format = v => v >= 0 ? v.toFixed(2) : '';
        const fromHt = () => {
            source.value = 'ht';
            const h = number(ht.value), r = number(vat.value);
            ttc.value = format(h * (1 + r / 100));
        };
        const fromTtc = () => {
            source.value = 'ttc';
            const t = number(ttc.value), r = number(vat.value);
            ht.value = format(r > 0 ? t / (1 + r / 100) : t);
        };
        ht.addEventListener('input', fromHt);
        ttc.addEventListener('input', fromTtc);
        vat.addEventListener('change', () => source.value === 'ttc' ? fromTtc() : fromHt());
    });
</script>
{% endblock %}