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

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

      <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">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:buildings-2-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Porteurs de projets</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{data.porteurProjets}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:widget-3-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Projets actifs</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{data.projetActifs}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:user-hand-up-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Partenaires inscrits</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{data.partenaires}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="ph:hand-heart" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Partenariats</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{data.conventions}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:euro-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Montant récolté</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{data.montantRecolte | separate_thousands}} €</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-9">
              <div class="card">
                <div class="card-body pb-4">
                  <div class="d-md-flex align-items-center justify-content-between mb-4">
                    <div class="hstack align-items-center gap-3">
                      <div>
                        <h5 class="card-title">Évolution du nombre de projets financés</h5>
                        <p class="card-subtitle mb-0">2025</p>
                      </div>
                    </div>
                  </div>
                  <div style="height: 285px;" class="me-n7">
                    <div id="chart"></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-3">
              <div class="card">
                <div class="card-body pb-4">
                  <div class="d-md-flex align-items-center justify-content-between mb-4">
                    <div class="hstack align-items-center gap-3">
                      <div>
                        <h5 class="card-title">Répartition des porteurs de projets</h5>
                        <p class="card-subtitle mb-0">2025</p>
                      </div>
                    </div>
                  </div>
                  <div style="height: 285px;" class="me-n7">
                    <div id="chartType"></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-9">
              <div class="row">
                <div class="col-md-6">
                  <div class="card">
                    <div>
                      <div class="d-flex align-items-start justify-content-between">
                        <div class="card-body">
                          <h5 class="card-title fw-semibold">Les 5 projets les plus financés</h5>
                        </div>
                      </div>
                      <div class="py-4 my-1">
                        <div id="projets-area" data-simplebar style="max-height: 260px; overflow: auto;">

                              {% for projet in data.projetTop5 %}
                              <div class="feed-item mb-2 py-2 pe-3 ps-4">
                                <div class="d-md-flex align-items-center">
                                  <div class="d-flex align-items-center gap-6 ms-2">
                                    {% if projet.logo is not null %}
                                      <img src="{{asset('uploads/projets/logos/' ~ projet.logo)}}"  style="height:auto; max-width:50px;">
                                    {% endif %}
                                    <div class="text-truncate">
                                      <span class="text-dark fw-medium">{{projet.titre}}</span><br/>{{projet.societe.nom}}
                                    </div>
                                  </div>
                                  <div class="
                                      justify-content-end
                                      text-truncate
                                      ms-5 ms-md-auto
                                      ps-4 ps-md-0
                                    ">
                                    <span class="fs-2 text-muted">{{projet.montantPrevu | separate_thousands}} €</span>
                                  </div>
                                </div>
                              </div>
                     
                        

                          {% endfor %}

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

                <div class="col-md-6">
                  <div class="card">
                    <div>
                      <div class="d-flex align-items-start justify-content-between">
                        <div class="card-body">
                          <h5 class="card-title fw-semibold">Les 5 partenaires les plus généreux</h5>
                        </div>
                      </div>
                      <div class="py-4 my-1">
                        <div id="projets-area" data-simplebar style="max-height: 260px; overflow: auto;">

                          {% for mecene in data.meceneTop5 %}
                            <div class="feed-item mb-2 py-2 pe-3 ps-4">
                              <div class="d-md-flex align-items-center">
                                <div class="d-flex align-items-center gap-6 ms-2">
                                  {% if mecene.mecene.logo is not null %}
                                    <img src="{{asset('uploads/mecenes/logos/' ~ mecene.mecene.logo)}}" style="height:auto; max-width:50px;">
                                  {% endif %}
                                  <div class="text-truncate">
                                    <span class="text-dark fw-medium">{{mecene.mecene.nom}}</span><br/>{{mecene.mecene.secteur.nom}}
                                  </div>
                                </div>
                                <div class="
                                    justify-content-end
                                    text-truncate
                                    ms-5 ms-md-auto
                                    ps-4 ps-md-0
                                  ">
                                  <span class="fs-2 text-muted">{{mecene.totalValeur | separate_thousands}} €</span>
                                </div>
                              </div>
                            </div>
                    
                      

                          {% endfor %}

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

            <div class="col-lg-3">
              <div class="card">
                <div>
                  <div class="d-md-flex align-items-center  mb-4">
                    <div class="hstack align-items-center gap-3">
                      <div>
                        <h5 class="card-title card-body">En chiffre</h5>
                        
                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-primary">
                                  <iconify-icon icon="solar:widget-3-broken" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.projetActifs}}</span> projets actifs
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-primary">
                                  <iconify-icon icon="solar:widget-3-broken" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.projetAll}}</span> projets créés
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-primary">
                                  <iconify-icon icon="solar:user-hand-up-broken" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.partenaires}}</span> partenaires inscrits
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-primary">
                                  <iconify-icon icon="ph:hand-heart" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.conventions}}</span> partenariats créés
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="feed-item mb-2 py-2 pe-3 ps-4 border-top">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-secondary">
                                  <iconify-icon icon="solar:calendar-broken" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.events}}</span> événements créés
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              <div class="d-flex align-items-center gap-6 ms-2 text-secondary">
                                  <iconify-icon icon="solar:album-broken" class="fs-7"></iconify-icon>
                                <div class="text-truncate text-black">
                                  <span class="text-dark fw-medium">{{data.galeries}}</span> galeries créés
                                </div>
                              </div>
                            </div>
                          </div>
                  
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    
    </div>

      <script>
  function handleColorTheme(e) {
    document.documentElement.setAttribute("data-color-theme", e);
  }
</script>
    </div>

<div class="modal" id="societeConnectModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="societeConnectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="societeConnectModalLabel">Sélectionnez une société</h5>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ path('admin_connect_societe', {'id': 0}) }}" id="societeConnectForm">
                        <div class="form-group">
                            <select class="form-control" id="societeConnect" name="societeConnect">
                                {% for societe in societes %}
                                    <option value="{{ societe.token }}">{{ societe.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="connectSociete()">Se connecter</button>
                </div>
            </div>
        </div>
    </div>

<script>

{% if data.projetParMois is not null %}
const chiffre = [
  {
    name: "Projet",
    data: [
      {% for nb in data.projetParMois %}
        {{nb.nb}} ,
      {% endfor %}   
    ],
  },
  
];

const nbType = [
  
  {% for nb in data.porteurByType %}
    {{nb.total}} ,
  {% endfor %}   
  
];

const labelType = [
  
  {% for label in data.porteurByType %}
    '{{label.type_nom}}' ,
  {% endfor %}   
  
];

{% endif %}

      const ajaxTodolistRoute = "{{ path('todolist_load') }}";
      const tacheUpdateRoute = "{{ path('todolist_update', { 'id': 'ID_PLACEHOLDER' }) }}";
      
        function connectSociete() {
            let selectedSocieteId = document.getElementById('societeConnect').value;
            let form = document.getElementById('societeConnectForm');
            form.action = form.action.replace('0', selectedSocieteId);
            form.submit();
        }
    </script>
{% if showSelectModal %}
    <script src="{{ asset('assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
    <script>
    console.log('jQuery version:', $.fn.jquery);
console.log('Bootstrap modal:', typeof $.fn.modal);
        document.addEventListener('DOMContentLoaded', function() {
            $('#societeConnectModal').modal('show');
        });  
    </script>

{% endif %}


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

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