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

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

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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
    <style>
        /* Chevron pivote selon l'état ouvert/fermé du panneau "Nouvelle dépense" (aria-expanded posé par Bootstrap collapse). */
        [data-bs-toggle="collapse"] .chevron-nouvelle-depense { transition: transform 0.2s ease; }
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-nouvelle-depense { transform: rotate(180deg); }
    </style>
{% 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">Recettes cantine (enveloppes)</div>
                    <div class="fs-1 fw-bold text-success">{{ soldeCantine.recettes|montant }}</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">Dépenses cantine (ingrédients, validées)</div>
                    <div class="fs-1 fw-bold text-danger">{{ soldeCantine.depenses|montant }}</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 cantine</div>
                    <div class="fs-1 fw-bold">{{ soldeCantine.solde|montant }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-nouvelle-depense" aria-expanded="false" aria-controls="collapse-nouvelle-depense">
            <div class="card-title"><h3>Nouvelle dépense</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-nouvelle-depense"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-nouvelle-depense">
        <div class="card-body pt-0">
            <form method="post" action="{{ path('comptabilite_depenses_nouvelle') }}" enctype="multipart/form-data" class="row g-3 align-items-end">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('depenses_nouvelle') }}">
                <div class="col-md-3">
                    <label class="form-label">Catégorie *</label>
                    <select name="categorie" required class="form-select">
                        <option value="">Choisir...</option>
                        {% for categorie in categories %}
                            <option value="{{ categorie.id }}">{{ categorie.libelle }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Montant *</label>
                    <input type="text" name="montant" required class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Description *</label>
                    <input type="text" name="description" required class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Pièce justificative (facultatif)</label>
                    <input type="file" name="fichier" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Montant HT (facultatif)</label>
                    <input type="text" name="montant_ht" class="form-control" placeholder="Si facture normalisée">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Taux TVA % (facultatif)</label>
                    <input type="text" name="taux_tva" class="form-control" placeholder="18">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                    <a href="{{ path('comptabilite_export_modele_recu') }}" class="btn btn-light-primary">Vendeur sans facture ? Télécharger le modèle de reçu</a>
                </div>
            </form>
        </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Historique</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table id="tbl-depenses" class="table align-middle table-row-dashed fs-6 gy-5 w-100">
                    <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <th>Date</th>
                            <th>Catégorie</th>
                            <th>Montant</th>
                            <th>Description</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600"></tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/datatables-fr.js') }}"></script>
    <script>
        $(function () {
            var badgesParStatut = { en_attente: 'badge-light-warning', valide: 'badge-light-success', refuse: 'badge-light-danger' };

            $('#tbl-depenses').DataTable({
                serverSide: true,
                order: [[0, 'desc']],
                ajax: { url: '{{ path('comptabilite_depenses_donnees') }}', type: 'GET' },
                language: DATATABLES_FR,
                columns: [
                    {
                        data: 'date',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            return escapeHtml(row.date) + '<br><span class="text-muted fs-8">Saisie par ' + escapeHtml(row.saisiePar) + '</span>';
                        }
                    },
                    { data: 'categorie', render: DataTable.render.text() },
                    {
                        data: 'montant',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            var html = formatMontant(row.montant);
                            if (row.montantHt) {
                                html += '<br><span class="text-muted fs-8">dont HT : ' + formatMontant(row.montantHt) + ' - TVA ' + escapeHtml(row.tauxTva) + '% : ' + formatMontant(row.montantTva) + '</span>';
                            }
                            return html;
                        }
                    },
                    { data: 'description', orderable: false, render: DataTable.render.text() },
                    {
                        data: 'statutLabel',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            var html = '<span class="badge ' + (badgesParStatut[row.statut] || 'badge-light') + '">' + escapeHtml(row.statutLabel) + '</span>';
                            if (row.valideePar) { html += '<br><span class="text-muted fs-8">par ' + escapeHtml(row.valideePar) + '</span>'; }
                            if (row.motifRefus) { html += '<br><span class="text-muted fs-8">motif : ' + escapeHtml(row.motifRefus) + '</span>'; }
                            (row.pieceUrls || []).forEach(function (url, index) {
                                html += '<br><a href="' + url + '" class="link-primary fs-8">Pièce jointe' + (row.pieceUrls.length > 1 ? ' ' + (index + 1) : '') + '</a>';
                            });
                            return html;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }
                            if (!row.enAttente) { return ''; }
                            return '<div class="d-flex gap-2">' +
                                '<form method="post" action="' + row.urlValider + '">' +
                                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfValider) + '">' +
                                    '<button type="submit" class="btn btn-light-success btn-sm">Valider</button>' +
                                '</form>' +
                                '<form method="post" action="' + row.urlRefuser + '" class="d-flex gap-2">' +
                                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfRefuser) + '">' +
                                    '<input type="text" name="motif" placeholder="Motif du refus" required class="form-control form-control-sm">' +
                                    '<button type="submit" class="btn btn-light-danger btn-sm">Refuser</button>' +
                                '</form>' +
                            '</div>';
                        }
                    }
                ]
            });
        });
    </script>
{% endblock %}