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

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

    <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>

        <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">Dépenses</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 dépense
                        </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" id="editable-datatable_wrapper">
                      <table
                        id="list_depense"
                        class="table border table-striped table-bordered display text-nowrap w-100" style="100%"
                      >
                        <thead>
                          <tr>
                            <th>Numéro facture</th>
                            <th>Fournisseur</th>
                            {% if projetBundle %}
                              <th>Projet</th>
                            {% endif %}
                            <th>Catégorie</th>
                            <th>Date</th>
                            <th>Total HT</th>
                            <th>Total TTC</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th colspan="{% if projetBundle %}5{% else %}4{% 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>
document.addEventListener('DOMContentLoaded', () => {
    // Initialisation pour les éléments déjà dans le DOM
    $('.select2').select2();

    // Réinitialisation lors de l'ouverture de la modal
    $('#addModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#addModal') // Fixe les problèmes de z-index
        });
    });
});


  const tableEntity = $('#list_depense').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('api_getlist_depense_date')}}', // URL du backend
          type: 'GET',
          cache: false,
      },
      columns: [
          { data: 'numero' },          
          { data: 'fournisseur' },
          {% if projetBundle %}{ data: 'projet' }, {% endif %}
          { data: 'categorie' }, 
          { data: 'date' },
          { data: 'totalht' },
          { data: 'totalttc' },  
          { data: 'action' },     
      ],
      dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
      {
          extend: 'excel',
          text: 'Exporter en Excel',
          filename: 'export_depenses', // Nom du fichier exporté en Excel
          className: 'btn btn-success'
      },
      {
          extend: 'pdf',
          text: 'Exporter en PDF',
          filename: 'export_depenses', // Nom du fichier exporté en PDF
          className: 'btn btn-danger'
      },
      {
          extend: 'print',
          text: 'Imprimer',
          className: 'btn btn-info'
      },
    ],
    language: {
        "info":           "Voir _START_ à _END_ de _TOTAL_ dépenses",
        "infoEmpty":      "Voir 0 à 0 de 0 dépense",
        "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_ dépenses)',
    },
    footerCallback: function (row, data, start, end, display) {
        // Calculer les totaux
        let totalHT = 0;
        let totalTTC = 0;

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

        // Mettre à jour le pied de page
        $('#totalHTFooter').html(totalHT.toFixed(2)); // Formatage avec 2 décimales
        $('#totalTTCFooter').html(totalTTC.toFixed(2));
    },
  });
    
  $(document).ready(function () {
    let type = 'month'; // 'month' ou 'year'
    let currentDate = new Date(); // Date actuelle

    const depensesUrl = "{{ path('api_getlist_depense_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 depensesUrl.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_depense').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('depense_add') }}";
    const updateRoute = "{{ path('depense_update') }}";
    const depenseDeleteRoute = "{{ path('depense_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
    const factureGetClientProjetRoute = "{{ path('get_client_projets', { 'id': 'ID_PLACEHOLDER' }) }}";
    const getRoute = "{{ path('depense_get_update', { 'id': 'ID_PLACEHOLDER' }) }}";
    const viewRoute = "{{ path('depense_get_view', { 'id': 'ID_PLACEHOLDER' }) }}";

</script>

    </div>

{% include '@Commercial/depense/offcanvas/view_offcanvas.html.twig' %} 
{% include 'partials/modal/edit_modal.html.twig' %}  
{% include '@Commercial/depense/modal/new_depense.html.twig' %}  
{% include 'partials/modal/delete_modal.html.twig' %}   
{% include 'partials/footer.html.twig' %}