{% extends '@App/partials/base.html.twig' %}

{% block content %}

    <div class="body-wrapper">
        <div class="container-fluid">

 
          <div class="row">

            <div class="col-lg-12">
              <div class="row flex-nowrap">
                
                <div class="col">

                  <div class="card metric-card">
                    <div class="card-body p-4">
                      <div class="d-flex align-items-center gap-2 mb-3">
                        <iconify-icon icon="streamline-cyber:business-handshake-deal" class="fs-7 text-black"></iconify-icon>
                        <div class="fw-semibold text-black">Partenaires actifs</div>
                      </div>

                      <div class="d-flex align-items-center mb-3">
                        <div>
                          <h4 class="card-title fs-8">{{data.partenaires}}</h4>
                        </div>
                        <div class="ms-auto">
                          <span class="display-6">
                            <iconify-icon icon="streamline-cyber:business-handshake-deal" class="fs-14"></iconify-icon>
                          </span>
                        </div>
                      </div>

                    </div>
                  </div>

                </div>

                <div class="col">

                  <div class="card metric-card">
                    <div class="card-body p-4">
                      <div class="d-flex align-items-center gap-2 mb-3">
                        <iconify-icon icon="ph:money-light" class="fs-7 text-black"></iconify-icon>
                        <div class="fw-semibold text-black">Montant total obtenu</div>
                      </div>

                      <div class="d-flex align-items-center mb-3">
                        <div>
                          <h4 class="card-title fs-8">{{data.montantRecolte | separate_thousands}} €</h4>
                        </div>
                        <div class="ms-auto">
                          <span class="display-6">
                            <iconify-icon icon="ph:coins-thin" class="fs-14"></iconify-icon>
                          </span>
                        </div>
                      </div>

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

                <div class="col">

                  <div class="card metric-card">
                    <div class="card-body p-4">
                      <div class="d-flex align-items-center gap-2 mb-3">
                        <iconify-icon icon="material-symbols-light:contract-outline-rounded" class="fs-7 text-black"></iconify-icon>
                        <div class="fw-semibold text-black">Convention en cours</div>
                      </div>

                      <div class="d-flex align-items-center mb-3">
                        <div>
                          <h4 class="card-title fs-8">{{data.nbConvention}}</h4>
                        </div>
                        <div class="ms-auto">
                          <span class="display-6">
                            <iconify-icon icon="material-symbols-light:contract-outline-rounded" class="fs-14"></iconify-icon>
                          </span>
                        </div>
                      </div>

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

                <div class="col">

                  <div class="card metric-card">
                    <div class="card-body p-4">
                      <div class="d-flex align-items-center gap-2 mb-3">
                        <iconify-icon icon="lets-icons:check-ring-light" class="fs-7 text-black"></iconify-icon>
                        <div class="fw-semibold text-black">Contreparties réalisées</div>
                      </div>

                      <div class="d-flex align-items-center">
                        <div>
                          <h4 class="card-title fs-8">{{ data.tauxContrepartie }}%</h4>
                        </div>
                         <div
                          class="ms-auto"
                          id="chartContrepartie"
                          data-controller="dashboard-contrepartie"
                          data-dashboard-contrepartie-taux-value="{{ data.tauxContrepartie }}"
                        >
                          
                        </div>
                      </div>

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

              </div>
            </div>  

            <div class="col-lg-8">

              <h5 class="card-title">Avancement des projets</h5>

              <div class="row flex-nowrap">

                {% for projet in projets %}
                      
                  {% set taux = (projet.montantPrevu / projet.objectifFinancier * 100)|round(0, 'common') %}
                  <div class="col-6">
                    <div class="card">
                      <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                          <div>
                            <a href="{{path('projet_view', {'id': projet.idtoken})}}">
                              <div class="d-flex align-items-center">
                                      
                                {% if projet.logo is not null %}
                                  <img src="{{asset('uploads/projets/logos/' ~ projet.logo)}}" height="40">
                                {% endif %}
                                <div class="ms-3">
                                  <h6 class="fs-4 fw-semibold mb-0">{{projet.titre}}</h6>
                                  <span class="fw-normal">{{projet.montantPrevu | separate_thousands}} €</span>
                                </div>
                            
                              </div>
                            </a>
                          </div>
                          <div class="ms-auto">
                            <span class="text-black fs-8 fw-bold">
                              {{taux}} %
                            </span>
                          </div>
                        </div>
                        <div class="progress text-bg-light">
                          <div class="progress-bar text-bg-success" role="progressbar" style="width: {{taux}}%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                {% endfor %}
              
              </div>

              <div class="row">
                      
                  <div class="col-12">
                    <div class="card">
                      <div class="card-body">
                        <h5 class="card-title">Propositions</h5>
                        {% if propositions is defined and propositions|length > 0 %}
                          <div class="table-responsive">
                            <table class="table mb-0 align-middle">
                              <thead class="text-muted">
                                <tr>
                                  <th>Projet</th>
                                  <th>Statut</th>
                                  <th>Date</th>
                                </tr>
                              </thead>
                              <tbody>
                                {% for proposition in propositions %}
                                  <tr>
                                    <td>
                                      {{ proposition.prospection and proposition.prospection.projet ? proposition.prospection.projet.titre : '—' }}
                                    </td>
                                    <td>
                                      <span class="badge bg-warning-subtle text-warning">
                                        {{ proposition.statut }}
                                      </span>
                                    </td>
                                    <td>
                                      {{ proposition.createdAt ? proposition.createdAt|date('d/m/Y') : '' }}
                                    </td>
                                  </tr>
                                {% endfor %}
                              </tbody>
                            </table>
                          </div>
                        {% else %}
                          <div class="text-muted">Aucune proposition en attente.</div>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              
            </div>
            
              <div class="col-lg-4">
                <h5 class="card-title">Dernières activités</h5>

                <div class="card">
                  <div class="card-body pb-4">
                    
                    <div class="me-n7">
                      {% if activites is defined and activites|length > 0 %}
                        <ul class="list-unstyled mb-0">
                          {% for historique in activites %}
                            <li class="d-flex align-items-start gap-3 py-2 border-bottom">
                              <div class="flex-grow-1">
                                <div class="fw-semibold">{{ historique.createdBy.prenom }} {{ historique.createdBy.nom }} {{ historique.action }}</div>
                                <small class="text-muted">
                                  {{ historique.createdAt ? historique.createdAt|date('d/m/Y H:i') : '' }}
                                </small>
                              </div>
                            </li>
                          {% endfor %}
                        </ul>
                      {% else %}
                        <div class="text-muted">Aucune activité récente.</div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>

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

<script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>


{% endblock %}