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

{% block content %}

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

 
          <div class="row">

            <div class="col-lg-8">
              <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: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-check-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Partenaires</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="solar:euro-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Montant total 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 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">Conventions et Partenariats</h5>
                        <p class="card-subtitle mb-0">2025</p>
                      </div>
                    </div>
                  </div>
                  <div style="height: 345px;" class="me-n7">
                    <div id="chart"></div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-start justify-content-between">
                        <div>
                          <h5 class="card-title fw-semibold">Prospection</h5>
                        </div>
                      </div>
                      <div class="py-4 my-1">
                        <table class="table text-nowrap mb-0 align-middle"> 
                        <tbody>                     
                          <tr>
                            <td>
                              <h6 class="fs-4 fw-semibold mb-0">Prospects en cours</h6>
                            </td>
                            <td class="text-end">
                              2
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <h6 class="fs-4 fw-semibold mb-0">Propositions en cours</h6>
                            </td>
                            <td class="text-end">
                              2
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <h6 class="fs-4 fw-semibold mb-0">Signés</h6>
                            </td>
                            <td class="text-end">
                              4
                            </td>
                          </tr>
                      </tbody>
                    </table>
                      </div>
                    
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-start justify-content-between">
                        <div>
                          <h5 class="card-title fw-semibold">Partenariats</h5>
                        </div>
                      </div>
                      <div class="py-4 my-1">
                        <div id="devis-area" data-simplebar style="max-height: 160px; overflow: auto;">
                          <table class="table text-nowrap mb-0 align-middle w-100">
                            <tbody>

                            </tbody>
                          </table>
                        </div>
                      </div>
                    
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <div class="col-lg-4">
              <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">Mes projets actifs</h5>
                      </div>
                    </div>
                  </div>
                  <div class="me-n7">
                     <table class="table text-nowrap mb-0 align-middle"> 
                        <tbody>

                          {% for projet in projets %}
                     
                            <tr>
                              <td>
                                <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>
                              </td>
                            </tr>

                          {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

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

<script>
{% if data.conventionParMois is not null %}
const nbConventions = 
  {
    name: "Partenariats",
    type: 'column',
    data: [
      {% for nb in data.conventionParMois %}
        {{nb.nb}} ,
      {% endfor %}   
    ],
  };

const valeurConventions = 
  {
    name: "Montant",
    type: 'line',
    data: [
      {% for nb in data.conventionValeurParMois %}
        {{nb.valeur}} ,
      {% endfor %}   
    ],
  };


{% endif %}
</script>

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

{% endblock %}