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

{% block title %}Avances et apports{% endblock %}

{% block page_title %}Avances et apports{% 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 "Nouveau mouvement" (aria-expanded posé par Bootstrap collapse). */
        [data-bs-toggle="collapse"] .chevron-nouveau-mouvement { transition: transform 0.2s ease; }
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-nouveau-mouvement { transform: rotate(180deg); }
    </style>
{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-nouveau-mouvement" aria-expanded="false" aria-controls="collapse-nouveau-mouvement">
            <div class="card-title"><h3>Nouveau mouvement</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-nouveau-mouvement"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-nouveau-mouvement">
        <div class="card-body pt-0">
            <form method="post" action="{{ path('comptabilite_avances_nouvelle') }}" enctype="multipart/form-data" class="row g-3 align-items-end">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('avances_nouvelle') }}">
                <div class="col-md-3">
                    <label class="form-label">Catégorie *</label>
                    <select name="categorie" id="mf-categorie" required class="form-select">
                        <option value="avance_remboursable">Avance remboursable</option>
                        <option value="apport_non_remboursable">Apport non remboursable</option>
                        <option value="subvention">Subvention</option>
                        <option value="don">Don</option>
                        <option value="depense_personnelle_a_rembourser">Dépense payée personnellement à rembourser</option>
                    </select>
                </div>
                <div class="col-md-2 d-none" id="mf-beneficiaire-champ">
                    <label class="form-label">Bénéficiaire *</label>
                    <select name="beneficiaire" id="mf-beneficiaire" class="form-select">
                        <option value=""></option>
                        {% for personne in personnel %}
                            <option value="{{ personne.id }}">{{ personne.prenom }} {{ personne.nom }}</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-2">
                    <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 (PDF/JPEG/PNG) *</label>
                    <input type="file" name="fichier" required class="form-control">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </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-avances" 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>Bénéficiaire</th>
                            <th>Solde dû</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 estDirection = {{ estDirection ? 'true' : 'false' }};
            var badgesParStatut = { en_attente: 'badge-light-warning', valide: 'badge-light-success', refuse: 'badge-light-danger' };
            var categoriesAvecBeneficiaire = ['avance_remboursable', 'depense_personnelle_a_rembourser'];

            function synchroniserBeneficiaire() {
                var applicable = categoriesAvecBeneficiaire.indexOf($('#mf-categorie').val()) !== -1;
                $('#mf-beneficiaire-champ').toggleClass('d-none', !applicable);
                $('#mf-beneficiaire').prop('required', applicable);
                if (!applicable) { $('#mf-beneficiaire').val(''); }
            }

            $('#mf-categorie').on('change', synchroniserBeneficiaire);
            synchroniserBeneficiaire();

            $('#tbl-avances').DataTable({
                serverSide: true,
                order: [[0, 'desc']],
                ajax: { url: '{{ path('comptabilite_avances_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">Saisi par ' + escapeHtml(row.saisiePar) + '</span>';
                        }
                    },
                    { data: 'categorie', render: DataTable.render.text() },
                    {
                        data: 'montant',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            return formatMontant(row.montant);
                        }
                    },
                    { data: 'description', orderable: false, render: DataTable.render.text() },
                    {
                        data: 'beneficiaire',
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return data || ''; }
                            return data ? escapeHtml(data) : '<span class="text-muted">-</span>';
                        }
                    },
                    {
                        data: 'soldeRestant',
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return data || ''; }
                            if (!row.remboursable) { return '<span class="text-muted">-</span>'; }
                            if (parseFloat(data) <= 0) { return '<span class="badge badge-light-success">Soldé</span>'; }
                            return formatMontant(data) + ' restant';
                        }
                    },
                    {
                        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>'; }
                            html += '<br><a href="' + row.pieceUrl + '" class="link-primary fs-8">Pièce justificative</a>';
                            return html;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }
                            var html = '<div class="d-flex gap-2 align-items-start">';
                            if (row.remboursable) {
                                html += '<a href="' + row.detailUrl + '" class="btn btn-light-primary btn-sm">Détails</a>';
                            }
                            if (row.enAttente && estDirection) {
                                html += '<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>';
                            }
                            html += '</div>';
                            return html;
                        }
                    }
                ]
            });
        });
    </script>
{% endblock %}