{% 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</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
                        </a>
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>

          <div class="datatables">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                  <div>
                      <button id="prev" class="btn btn-secondary">Précédent</button>
                      <span id="current-period"></span>
                      <button id="next" class="btn btn-secondary">Suivant</button>
                  </div>
                  <div>
                      <button id="switch-to-month" class="btn btn-primary">Mois</button>
                      <button id="switch-to-year" class="btn btn-outline-primary">Année</button>
                  </div>
              </div>
                <div class="table-responsive mb-4  rounded-1">
                  
                    <table id="list_facture" class="table text-nowrap mb-0 align-middle w-100" > 
                      
                        <thead>
                          <tr>
                            <th>Id</th>
                            <th>Client</th>
                            <th>Date de facturation</th>
                            <th>Total HT</th>
                            <th>Total TTC</th>
                            <th>Statut</th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th colspan="3" 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_date') }}', // URL de l'API
          type: 'GET',
          cache: false,
          data: function(d) {
              d.length = d.length || 20; // Nombre de lignes par défaut
          }
      },
      columns: [
          { data: 'id' },          
          { data: 'client' },
          { data: 'date' },
          { data: 'totalht' },
          { data: 'totalttc' },  
          { data: 'statut' },         
      ],
      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) => {
            let statut = stripHtml(item.statut).trim();
            if(statut == 'Acompte' || statut == 'Validée' || statut == 'Payé') {
                totalHT += parseFloat(item.totalht) || 0;
                totalTTC += parseFloat(item.totalttc) || 0;
            }
          });

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

    function stripHtml(html) {
    // Petit utilitaire pour extraire le texte d'un HTML
    let div = document.createElement("div");
    div.innerHTML = html;
    return div.textContent || div.innerText || "";
}
  $(document).ready(function () {
    let type = 'month'; // 'month' ou 'year'
    let currentDate = new Date(); // Date actuelle

    const facturesUrl = "{{ path('api_getlist_facture_date', { 'date': '2024-01', 'type': 'month'}) | raw }}";

    function formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        return type === 'month' ? `${year}-${month}` : `${year}`;
    }

    function updateUrl(type, date) {
        // Mettez à jour l'URL en remplaçant les paramètres {type} et {date}
        return facturesUrl.replace('month', type).replace('2024-01', date);
    }

    function updatePeriodLabel() {
        const options = { year: 'numeric', month: type === 'month' ? 'long' : undefined };
        $('#current-period').text(currentDate.toLocaleDateString('fr-FR', options));
    }

    function reloadTable() {
        const ajaxUrl = updateUrl(type, formatDate(currentDate));
        $('#list_facture').DataTable().ajax.url(ajaxUrl).load();
    }

    // Mise à jour de la période actuelle
    updatePeriodLabel();

    // Navigation
    $('#prev').on('click', function () {
        if (type === 'month') {
            currentDate.setMonth(currentDate.getMonth() - 1);
        } else {
            currentDate.setFullYear(currentDate.getFullYear() - 1);
        }
        updatePeriodLabel();
        reloadTable();
    });

    $('#next').on('click', function () {
        if (type === 'month') {
            currentDate.setMonth(currentDate.getMonth() + 1);
        } else {
            currentDate.setFullYear(currentDate.getFullYear() + 1);
        }
        updatePeriodLabel();
        reloadTable();
    });

    // Changement d'affichage (mois/année)
    $('#switch-to-month').on('click', function () {
        type = 'month';
        $(this).addClass('btn-primary').removeClass('btn-outline-primary');
        $('#switch-to-year').addClass('btn-outline-primary').removeClass('btn-primary');
        updatePeriodLabel();
        reloadTable();
    });

    $('#switch-to-year').on('click', function () {
        type = 'year';
        $(this).addClass('btn-primary').removeClass('btn-outline-primary');
        $('#switch-to-month').addClass('btn-outline-primary').removeClass('btn-primary');
        updatePeriodLabel();
        reloadTable();
    });
});



    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/payment_modal.html.twig' %}  
{% include 'partials/modal/edit_modal.html.twig' %}  
{% include '@Commercial/facture/modal/new_facture.html.twig' %}  
{% include 'partials/modal/delete_modal.html.twig' %}   
{% include 'partials/footer.html.twig' %}