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

{% block title %}Dashboard | FundUp{% endblock %}

{% block content %}

      <div class="body-wrapper"
           data-controller="dashboard-charts"
           data-dashboard-charts-project-series-value="{% if data.projetParMois is not null %}[{% for nb in data.projetParMois %}{{ nb.nb }}{% if not loop.last %},{% endif %}{% endfor %}]{% else %}[]{% endif %}"
           data-dashboard-charts-type-series-value="{% if data.porteurByType is not null %}[{% for nb in data.porteurByType %}{{ nb.total }}{% if not loop.last %},{% endif %}{% endfor %}]{% else %}[]{% endif %}"
           data-dashboard-charts-type-labels-value="{% if data.porteurByType is not null %}[{% for label in data.porteurByType %}{{ label.type_nom|json_encode }}{% if not loop.last %},{% endif %}{% endfor %}]{% else %}[]{% endif %}">
        <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" data-dashboard-charts-target="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" data-dashboard-charts-target="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);
  }
      
        function connectSociete() {
            let selectedSocieteId = document.getElementById('societeConnect').value;
            let form = document.getElementById('societeConnectForm');
            form.action = form.action.replace('0', selectedSocieteId);
            form.submit();
        }
    </script>


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

{% endblock %}