{% extends 'bundles/SonataAdminBundle/standard_layout.html.twig' %}


{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
{% endblock %}

{# Define the variable out of the block to prevent error if someone is overriding the list_table and not the list_footer #}

{% block list_table %}
    <div class="col-xs-12 col-md-12">
        {# Add a margin if no pager to prevent dropdown cropping on window #}
        <div class="date_range date_range_stat">
          <div class="input-group">
            <div class="input-group date" id="dp_filtercreatedAt">
              <input type="text" id="filtercreatedAt" name="filtercreatedAt" data-date-format="DD-MM-YYYY" class="form-control">
              <span class="input-group-addon">
                  <span class="fa-calendar fa"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="box box-primary newbox" style="margin-bottom: 100px;">
            <div class="box-body">

                {% block list_header %}{% endblock %}
                
                {% block table %}
                    {% block table_header %}{% endblock %}
                    {% block table_body %}
                      <div class="row">
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Nombre de client</span>
                              <span class="chiffre nbclient">0</span>
                              <div id="spark1"></div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Nombre de prestations</span>
                              <span class="chiffre total_presta">0</span>
                              <div id="spark2"></div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Nombre de produits</span>
                              <span class="chiffre nb_produit">0</span>
                               <div id="spark3"></div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Montant total des prestations</span>
                              <span class="chiffre montantpresta">0</span>
                              <div id="spark4"></div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Montant total des produits</span>
                              <span class="chiffre montantproduit">0</span>
                              <div id="spark5"></div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-2">
                          <div class="cards">
                            <div class="card-body">
                              <span class="title">Reste à payer</span>
                              <span class="chiffre resetpayer">0</span>
                              <div id="spark6"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="row">
                        <div class="chartbox col-md-12">
                          <div>
                              <div class="chart_title">
                                <div><span class="title">Encaissements en Dhs </span><span class="chiffre1 montantcaisse">0</span></div>
                                <div><span class="title">Décaissements en Dhs</span><span class="chiffre2 montantcharges">0</span></div>
                                <div><span class="title">Résultat en Dhs </span><span class="chiffre3 results">0</span></div>
                              </div>
                              <div id="chart1"></div>
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 chartbox">
                         <div>
                            <div class="chart_title">
                              <span>Charges caisse réception</span>
                              <div><span class="title">Total en Dhs </span><span class="chiffre1 chargesrecep">0</span></div>
                            </div>
                            <div id="chart2"></div>
                          </div>
                        </div>
                        <div class="col-md-6 chartbox">
                          <div>
                            <div class="chart_title">
                              <span>Charges caisse administratives</span>
                              <div><span class="title">Total en Dhs </span><span class="chiffre1 chargesrdmin">0</span></div>
                            </div>
                            <div id="chart3"></div>
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 chartbox"> <div id="chart41"></div></div>
                        <div class="col-md-6 chartbox"> <div id="chart51"></div></div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 chartbox"> <div id="chart4"></div></div>
                        <div class="col-md-6 chartbox"> <div id="chart5"></div></div>
                      </div>

                      <div class="row">
                        <div class="chartbox col-md-12"> <div id="chart10"></div></div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 chartbox"> <div id="chart6"></div></div>
                        <div class="col-md-6 chartbox"> <div id="chart7"></div></div>
                      </div>

                      <div class="row">
                        <div class="col-md-6 chartbox"> <div id="chart8"></div></div>
                        <div class="col-md-6 chartbox"> <div id="chart9"></div></div>
                      </div>

                      <div class="row">
                        {# <div class="col-md-6 chartbox"> <div id="chart11"></div></div> #}
                        <div class="col-md-12 chartbox"> <div id="chart12"></div></div>
                      </div>

                    {% endblock %}
                    {% block table_footer %}{% endblock %}
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="{{ asset('admin/js/chart.js?v=8')}}"></script>
{% endblock %}