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

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

        <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">Factures récurrentes</h4>
                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        <a class="btn btn-rounded btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addModal">
                          Ajouter une facture récurrente
                        </a>
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>

          <div class="datatables">
            <div class="card">
              <div class="card-body">
                
                <div class="table-responsive" id="editable-datatable_wrapper">
                      <table
                        id="list_facture"
                        class="table border table-striped table-bordered display text-nowrap w-100"
                      >
                        <thead>
                          <tr>
                            <th>Client</th>
                            <th>Facture</th>
                            {% if projetBundle %}
                              <th>Projet</th>
                            {% endif %}
                            <th>Fréquence</th>
                            <th>Total HT</th>
                            <th>Total TTC</th>
                            <th>Statut</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th colspan="{% if projetBundle %}4{% else %}3{% endif %}" style="text-align:right">Totaux</th>
                            <th id="totalHTFooter"></th>
                            <th id="totalTTCFooter"></th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>

<script>

  const tableEntity = $('#list_facture').DataTable({
      processing: true, // Affiche un indicateur de chargement
      serverSide: true, // Active le mode serveur
      ajax: {
          url: '{{ path('api_getlist_facture_recurrente') }}', // URL de l'API
          type: 'GET',
          cache: false,
          data: function(d) {
              d.length = d.length || 20; // Nombre de lignes par défaut
          }
      },
      columns: [
          { data: 'client' },
          { data: 'facture' },
          {% if projetBundle %}{ data: 'projet' }, {% endif %}
          { data: 'frequence' },
          { data: 'totalht' },
          { data: 'totalttc' },  
          { data: 'statut' },         
          { data: 'action' },     
      ],
      paging: true,  // ✅ Active la pagination
      searching: true, // ✅ Active la recherche
      ordering: true, // ✅ Active le tri
      info: true, // ✅ Affiche les informations du tableau
      lengthChange: true, // ✅ Permet à l'utilisateur de modifier le nombre de lignes affichées
      pageLength: 25, // ✅ Nombre de lignes par défaut
      lengthMenu: [25, 50, 75, 100], // ✅ Options de sélection

      dom: 'Bfrtip', // ✅ Affiche les boutons d'export en haut du tableau
      buttons: [
          {
              extend: 'excel',
              text: 'Exporter en Excel',
              filename: 'export_factures',
              className: 'btn btn-success'
          },
          {
              extend: 'pdf',
              text: 'Exporter en PDF',
              filename: 'export_factures',
              className: 'btn btn-danger'
          },
          {
              extend: 'print',
              text: 'Imprimer',
              className: 'btn btn-info'
          },
      ],

      language: {
          "info":           "Voir _START_ à _END_ de _TOTAL_ factures",
          "infoEmpty":      "Voir 0 à 0 de 0 factures",
          "search":         "Rechercher:",
          "paginate": {
              "first":      "Premier",
              "last":       "Dernier",
              "next":       "Suivant",
              "previous":   "Précédent"
          },
          "zeroRecords": "Aucun enregistrement correspondant trouvé",
          "emptyTable": "Aucune donnée disponible dans le tableau",
          "infoFiltered": '(filtrés de _MAX_ factures)',
          "lengthMenu": "Afficher _MENU_ factures par page" // ✅ Texte pour la sélection du nombre de lignes
      },

      footerCallback: function (row, data, start, end, display) {
          let totalHT = 0;
          let totalTTC = 0;

          data.forEach((item) => {
              totalHT += parseFloat(item.totalht) || 0;
              totalTTC += parseFloat(item.totalttc) || 0;
          });

          $('#totalHTFooter').html(totalHT.toFixed(2)+ ' €');
          $('#totalTTCFooter').html(totalTTC.toFixed(2)+ ' €');
      },
});


    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }
    const addRoute = "{{ path('facture_add') }}";
    const updateRoute = "{{ path('facture_update') }}";
    const factureDeleteRoute = "{{ path('facture_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
    const factureGetClientProjetRoute = "{{ path('get_client_projets', { 'id': 'ID_PLACEHOLDER' }) }}";
    const getRoute = "{{ path('facture_get_update', { 'id': 'ID_PLACEHOLDER' }) }}";
    const getPaymentRoute = "{{ path('facture_get_payment', { 'id': 'ID_PLACEHOLDER' }) }}";

</script>

    </div>
{% include 'partials/modal/edit_modal.html.twig' %}  
{% include 'partials/modal/delete_modal.html.twig' %}   
{% include '@Commercial/facture_recurrente/modal/new_facture_recurrente.html.twig' %}  

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