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

{% block title %}Journal des actions{% endblock %}

{% block page_title %}Journal des actions{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-body">
            <form id="filtre-journal" class="row g-3 align-items-end" onsubmit="return false;">
                <div class="col-auto">
                    <label class="form-label">Filtrer par entité</label>
                    <input type="text" id="filtre-entite" value="{{ entiteFiltree }}" placeholder="ex. Enfant, Contrat, PreInscription" class="form-control">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary" onclick="document.querySelector('#tbl-journal').dispatchEvent(new Event('creche:filtrer'))">Filtrer</button>
                </div>
                <div class="col-auto">
                    <a href="{{ path('administration_journal') }}" class="btn btn-light">Réinitialiser</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Entrées du journal</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table id="tbl-journal" 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>Utilisateur</th>
                            <th>Action</th>
                            <th>Entité</th>
                            <th>Détails</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 table = $('#tbl-journal').DataTable({
                serverSide: true,
                searching: false,
                order: [[0, 'desc']],
                ajax: {
                    url: '{{ path('administration_journal_donnees') }}',
                    type: 'GET',
                    data: function (d) {
                        d.entite = $('#filtre-entite').val();
                    }
                },
                columns: [
                    { data: 'date', render: DataTable.render.text() },
                    { data: 'utilisateur', orderable: false, render: DataTable.render.text() },
                    { data: 'action', render: DataTable.render.text() },
                    { data: 'entite', render: DataTable.render.text() },
                    { data: 'details', orderable: false, render: DataTable.render.text() }
                ],
                language: DATATABLES_FR
            });

            $('#tbl-journal').on('creche:filtrer', function () {
                table.ajax.reload();
            });
        });
    </script>
{% endblock %}