{% include 'partials/header.html.twig' %}

    <script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>

    <link rel="stylesheet" href="{{ asset('assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">

    <script src="{{ asset('assets/libs/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js') }}"></script>


      <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h4 class="mb-4 mb-sm-0 card-title">Activités</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="datatables">
            <div class="card">
              <div class="card-body">

                <div class="input-daterange input-group mb-4" id="date-range">
                  <input type="text" class="form-control" name="start">

                  <span class="input-group-text bg-primary b-0 text-white">au</span>

                  <input type="text" class="form-control" name="end">
                </div>

                <div class="col-4 d-flex align-items-center justify-content-center mb-3">
                    <div class="text-black me-2">Employé</div>
                    <select class="form-control" name="employe" id="employe">
                        <option value="">Sélectionnez un client</option>
                      {% for employe in employes %}
                        <option value="{{employe.idtoken}}">{{employe.prenom}} {{employe.nom}}</option>
                      {% endfor %}
                    </select>
                </div>



                <div class="table-responsive mb-4  rounded-1">
                  
                      <table id="list_activite" class="table text-nowrap mb-0 align-middle w-100" >
                        <thead>
                          <tr>
                            <th>Employé</th>
                            <th>Type</th>
                            <th>Activité</th>
                            <th>Date</th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Employé</th>
                            <th>Type</th>
                            <th>Activité</th>
                            <th>Date</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>
      </div>

<script>

    const tableEntity = $('#list_activite').DataTable({
    processing: true,
    serverSide: true,
    paging: true,
    pageLength: 25,
    lengthMenu: [25, 50, 75, 100],
    lengthChange: true,
    ajax: {
        url: '{{ path("api_list_activite") }}',
        type: 'GET',
        cache: false,
        data: function (d) {
            // d contient déjà draw, start, length, search, order...
            d.societeId = '{{ societe.token }}';
            d.startDate = $('input[name="start"]').val();
            d.endDate = $('input[name="end"]').val();
            d.employe = $('#employe').val();
        },
        dataSrc: 'data', // (optionnel mais plus explicite)
        error: function (xhr, error, thrown) {
            console.error('Erreur AJAX DataTables:', error, xhr.responseText);
        }
    },
    columns: [
        { data: 'user', title: 'Utilisateur' },
        { data: 'type', title: 'Type' },
        { data: 'activite', title: 'Activité' },
        { data: 'date', title: 'Date' },
    ],
    order: [[3, 'desc']], // tri par date par défaut
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excel',
            text: 'Exporter en Excel',
            filename: 'export_activites',
            className: 'btn btn-success'
        },
        {
            extend: 'pdf',
            text: 'Exporter en PDF',
            filename: 'export_activites',
            className: 'btn btn-danger'
        },
        {
            extend: 'print',
            text: 'Imprimer',
            className: 'btn btn-info'
        },
    ],
    language: {
        info: "Voir _START_ à _END_ de _TOTAL_ activités",
        infoEmpty: "Voir 0 à 0 de 0 activité",
        search: "Rechercher:",
        paginate: {
            first: "Premier",
            last: "Dernier",
            next: "Suivant",
            previous: "Précédent"
        },
        lengthMenu: "Afficher _MENU_ activités",
        zeroRecords: "Aucune activité correspondante enregistrée",
        emptyTable: "Aucune activité disponible dans le tableau",
        infoFiltered: "(filtrées sur _MAX_ activités)"
    }
});

// Reload au changement de date
$('#date-range').datepicker({
    toggleActive: true,
    language: 'fr',
    format: 'dd/mm/yyyy',
}).on('changeDate', function() {
    tableEntity.ajax.reload(null, false);
});

$('#employe').on('change', function () {
  tableEntity.ajax.reload();
});

</script>
    </div>

{% include 'partials/footer.html.twig' %}