{% 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>
    <script src="{{ asset('assets/libs/jquery-steps/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-validation/jquery.validate.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">
                <h5>Partenaires</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_partenaires', {'id': projet.idtoken})}}" class="p-2">Partenaires </a>
                  
                </div>
              </div>
            </div>
          </div>

        {% if has_contrepartie | length == 0 %}
            <div class="alert alert-warning text-center text-warning">
                Avant d'ajouter un partenaires, il est indispensable de créer <strong>les contreparties du projet</strong>
                  <div class="text-center mt-6">
                    <a class="btn btn-rounded btn-outline-warning" href="{{ path('projet_view_contreparties', {'id' : projet.idtoken}) }}">Cliquez-ici</a>
                  </div>
            </div>
          {% elseif has_formule | length == 0 %}
            <div class="alert alert-warning text-center text-warning">
                Avant d'ajouter un partenaires, il est indispensable de créer <strong>les formules de partenariat du projet</strong>
                  <div class="text-center mt-6">
                    <a class="btn btn-rounded btn-outline-warning" href="{{ path('projet_view_formules', {'id' : projet.idtoken}) }}">Cliquez-ici</a>
                  </div>
            </div>
          {% endif %}

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

                {% if has_contrepartie | length != 0 and has_formule | length != 0 %}
                  {% if projet.statut == 'Ouvert' %}
                    <div class="text-end">
                        <button type="button" class="btn btn-light" id="addMecene" data-id="{{projet.idtoken}}">
                            Ajouter un partenariat
                        </button>
                    </div>
                  {% endif %}
                {% endif %}

                <div class="row justify-content-center">
                    <div class="datatables">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive mb-4  rounded-1">
                                
                                <table id="tableConvention" class="table text-nowrap mb-0 align-middle w-100" > 

                                    <thead>
                                        <tr>
                                            <th>Partenaire</th>
                                            <th>Secteur d'activité</th>
                                            <th>Type</th>
                                            <th>Contact principal</th>
                                            <th>Valeur</th>
                                            <th>Reçu</th>
                                            <th>Progression</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                            <tr>
                                             <th>Partenaire</th>
                                            <th>Secteur d'activité</th>
                                            <th>Type</th>
                                            <th>Contact principal</th>
                                            <th>Valeur</th>
                                            <th>Reçu</th>
                                            <th>Progression</th>
                                            <th>Actions</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        </div>
      </div>
    </div>

<script>

     const tableConvention = $('#tableConvention').DataTable({
        "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_list_convention')}}', // URL du backend
            type: 'GET',
            cache: false,
            data: function(d) {
              d.projetId = '{{projet.idtoken}}'; // ID du projet à inclure dans la requête
          }
        },
        drawCallback: function() {
            $('[data-bs-toggle="tooltip"]').tooltip();
        },
        columns: [
            { data: 'mecene' },  
            { data: 'secteur' }, 
            { data: 'rang' }, 
            { data: 'contact' }, 
            { data: 'valeur' },       
            { data: 'recu' }, 
            { data: 'progression' },   
            { data: 'action' },     
        ],
        columnDefs: [
            {
                targets: 1,
                className: 'text-wrap' // ta classe personnalisée
            },
            {
                targets: 3,
                className: 'text-wrap' // ta classe personnalisée
            }
        ],
        dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
      {
          extend: 'excel',
          text: 'Exporter en Excel',
          filename: 'export_taches', // Nom du fichier exporté en Excel
          className: 'btn btn-success'
      },
      {
          extend: 'pdf',
          text: 'Exporter en PDF',
          filename: 'export_taches', // Nom du fichier exporté en PDF
          className: 'btn btn-danger'
      },
      {
          extend: 'print',
          text: 'Imprimer',
          className: 'btn btn-info'
      },
      {
        text: 'Exporter les adresses emails',
        className: 'btn btn-primary',
        action: function (e, dt, node, config) {
          const url = "{{ path('export_emails_projet', {'id': projet.idtoken }) }}";
          window.location.href = url;
        }
      },
    ],
        language: {
          "info":           "Voir _START_ à _END_ de _TOTAL_ partenariats",
          "infoEmpty":      "Voir 0 à 0 de 0 partenariat",
          "search":         "Rechercher:",
          "paginate": {
              "first":      "Premier",
              "last":       "Dernier",
              "next":       "Suivant",
              "previous":   "Précédent"
          },
          "infoFiltered": '(filtrées de _MAX_ partenariats)',
      }
    });

    $('#filterStatus').on('change', function () {
        tableConvention.ajax.reload();
    });
    
    const projetId = '{{projet.idtoken}}';
</script>


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

<script src="{{ asset('assets/js/global/fonctions.js') }}"></script>
<script src="{{ asset('assets/js/projet/projet_view.js') }}"></script>
<script src="{{ asset('assets/js/projet/mecene.js') }}"></script>

<script src="{{ asset('assets/js/data/search_mecene_ajax.js') }}"></script>
<script src="{{ asset('assets/js/data/update_datatable.js') }}"></script>

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