{% 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-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">
                        16,689</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">Projets inscrits</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        16,689</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">
                        16,689</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">Évolution du nombre d'inscriptions</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 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">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: 160px; overflow: auto;">
                          <table class="table text-nowrap mb-0 align-middle w-100">
                            <tbody>


                            </tbody>
                          </table>
                        </div>
                      </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">Les 5 sociétés les plus financeuses</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">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="chart"></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 total is not null %}
const chiffre = [
  {
    name: "Chiffre d'affaire",
    data: [
      {% for chiffre in total.caParMois %}
        {{chiffre.chiffre_affaire}} ,
      {% endfor %}   
    ],
  },
  {
    name: "Dépenses",
    data: [
      {% for chiffre in total.depenseParMois %}
        {{chiffre.depenses}} ,
      {% endfor %}   
    ],
  },
];

const chProjet = [
  {
    name: "Projet",
    data: [
      {% for nb in total.projetParMois %}
        {{nb.nb}} ,
      {% endfor %}   
    ],
  },
];

const chClient = [
  {
    name: "Clients",
    data: [
      {% for nb in total.clientParMois %}
        {{nb.nb}} ,
      {% endfor %}   
    ],
  },
];

const chTache = [{{total.nbTacheNonCommencees}}, {{total.nbTacheEnCours}}, {{total.nbTacheTerminees}}];
{% 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-home.js') }}"></script>
<script src="{{ asset('assets/js/dashboards/todolist.js') }}"></script>

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