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

    <script src="{{ asset('assets/libs/jquery/dist/jquery.min.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>

    <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>
    <script src="{{ asset('assets/js/compta/compta.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">Ecritures comptables</h4>
                  
                </div>
              </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="table-responsive" id="editable-datatable_wrapper">
                      <table
                        id="list_ecriture"
                        class="table border table-striped table-bordered display text-nowrap w-100"
                      >
                        <thead>
                          <tr>
                            <th>Date</th>
                            <th>Libellé</th>
                            <th>Crédit</th>
                            <th>Débit</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Date</th>
                            <th>Libellé</th>
                            <th>Crédit</th>
                            <th>Débit</th>
                            <th>Action</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>

      <script>
        const tableEntity = $('#list_ecriture').DataTable({
            // Options personnalisées (facultatif)
            "paging": true,          // Activer la pagination
            "searching": true,       // Activer la recherche
            "ordering": true,        // Activer le tri des colonnes
            "info": true,            // Afficher les informations sur le nombre de résultats
            "lengthChange": false,    // Permettre de changer le nombre de lignes affichées
            "pageLength": 20,        // Nombre de lignes par page par défaut
            processing: true, // Affiche un indicateur de chargement
            serverSide: true, // Active le mode server-side
            ajax: {
              url: '{{path('ajax_list_ecriture_comptable')}}', // URL du backend
              type: 'GET',
              cache: false,
              data: function (d) {
                d.start = $('input[name="start"]').val();
                d.end = $('input[name="end"]').val();
              }
            },
            columns: [
                { data: 'date' },
                { data: 'libelle' },
                { data: 'credit' },
                { data: 'debit' },
                { data: 'action' },
            ],
            
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ écritures",
            "infoEmpty":      "Voir 0 à 0 de 0 écriture",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrés de _MAX_ écritures)',
            "zeroRecords": "Aucune écriture correspondante trouvée",
           "emptyTable": "Aucune écriture n'est enregistrée",

        }
    });
    

    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }

    jQuery("#date-range").datepicker({
      toggleActive: true,
      language: 'fr',
      format: 'dd/mm/yyyy',
    }).on('changeDate', function() {
        tableEntity.ajax.reload(null, false);
    });
</script>
          </div>

    </div>

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