{% 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/js/projet/prospection.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>Prospection</h5>
                <div class="d-sm-flex align-items-center justify-space-between text-black">
                  
                  <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_prospection', {'id': projet.idtoken})}}" class="p-2">Prospection </a> >
                  {{prospection.mecene.nom}}
                  
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-8">
              <div class="card">
                <div class="card-body">
                  <div class="table-responsive mb-4  rounded-1">
                    <h5>Liste des propositions</h5>
                    {% if dejaMecene %}
                      <div class="alert alert-success text-success mt-4" role="alert">
                        Cette entreprise est déjà partenaire de ce projet !
                    </div>
                    {% else %}
                      <div class="text-end">
                        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addPropositionModal">Ajouter une proposition</button>
                      </div>
                    {% endif %}
                    <table id="list_proposition" class="table text-nowrap mb-0 align-middle w-100" > 
                        <thead>
                          <tr>
                            <th>Date</th>
                            <th>Formule</th>
                            <th>Montant</th>
                            <th>Statut</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          
                          

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Date</th>
                            <th>Formule</th>
                            <th>Montant</th>
                            <th>Statut</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

            <div class="col-4">
              <div class="card">
                <div class="card-body">
                  <h5>Partenaire</h5>
                  <div class="d-flex align-items-center">
                    <img src="{{asset('uploads/mecenes/logos/' ~ prospection.mecene.logo )}}" class="card-hover" width="80">
                    <div class="ms-3">
                        <h4 class="fw-semibold mb-0">{{prospection.mecene.nom}}</h4>
                        <span class="fw-normal">{{prospection.mecene.secteur.nom}}</span>
                    </div>
                  </div>
                  <div class="text-black mt-4">
                    <span class="fw-semibold ">Demande faite le </span>{{prospection.createdAt | date('d/m/Y')}}<br/>
                    <span class="fw-semibold ">Demandé par </span>{{prospection.createdBy.prenom}} {{prospection.createdBy.nom}}<br/><br/>

                    <span class="fw-semibold ">Message </span><br/>{{prospection.commentaire}}<br/><br/>
                  </div>
              </div>
            </div>


          </div>

        </div>
      </div>

      <script>
const prospectionId = '{{prospection.idtoken}}';

const tableEntity  = $('#list_proposition').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_proposition')}}', // URL du backend
      type: 'GET',
      cache: false,
      data: function (d) {
          d.prospection = '{{prospection.idtoken}}';  
      }

      
  },
  initComplete: function() {
        $('[data-bs-toggle="tooltip"]').tooltip();
    },
    rowCallback: function(row, data) {
        // Appliquer sur la ligne injectée
        $(row).find('[data-bs-toggle="tooltip"]').tooltip();
    },
  columns: [
      { data: 'date' },          
      { data: 'formule' }, 
      { data: 'montant' },
      { data: 'statut' },       
      { data: 'action' },     
  ],
  // 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
  
  dom: 'Bfrtip', // Affiche les boutons en haut du tableau
  buttons: [
    {
        extend: 'excel',
        text: 'Exporter en Excel',
        filename: 'export_projets', // Nom du fichier exporté en Excel
        className: 'btn btn-success'
    },
    {
        extend: 'pdf',
        text: 'Exporter en PDF',
        filename: 'export_projets', // 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_ projets",
      "infoEmpty":      "Voir 0 à 0 de 0 projet",
      "search":         "Rechercher:",
      "paginate": {
          "first":      "Premier",
          "last":       "Dernier",
          "next":       "Suivant",
          "previous":   "Précédent"
      },
      "infoFiltered": '(filtrés de _MAX_ projets)',
      "zeroRecords": "Aucune proposition correspondante trouvée",
      "emptyTable": "Aucune proposition n'est enregistrée",
  }
});

</script>
    </div>
{% include 'partials/modal/ajax_modal_xl.html.twig' %}   
{% include '@Projet/prospection/modal/new_proposition.html.twig' %} 
{% include 'partials/modal/delete_modal.html.twig' %}    
{% include 'partials/footer.html.twig' %}