{% extends 'admin/base.html.twig' %}

{% block title %}Admin{% endblock %}

{% block body %}
       <script src="/apexcharts-bundle/dist/apexcharts.js"></script>
       <div class="wrapper">
              {% include 'include/side_menu.html.twig' %}

              <div id="content" class="content">
                     {% include 'include/top_menu.html.twig' %}
                     <div class="content-wrapper">
                            <div class="content-body">
                                   <div class="h4 col-12 card"><div class="card-content"><div class="h4 card-body text-center">Vue d'ensemble</div></div></div>
                                          <br>
                                   <div class="row">
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="badge-circle badge-circle-lg badge-circle-light-primary mx-auto mb-50">
                                                                             <i class="bx bx-file-blank text-primary font-medium-5"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Fiches</div>
                                                                      <h3 class="mb-0">{{ fiches }}</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="badge-circle badge-circle-lg badge-circle-light-secondary mx-auto mb-50">
                                                                             <i class="bx bx-stats text-secondary font-medium-5"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Catégories</div>
                                                                      <h3 class="mb-0">{{ categories }}</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
                                                                             <i class="bx bx-sitemap text-success font-medium-5"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Itinéraires pédagogiques</div>
                                                                      <h3 class="mb-0">{{ itineraries }}</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="badge-circle badge-circle-lg badge-circle-light-primary mx-auto mb-50">
                                                                             <i class="bx bx-file-blank text-primary font-medium-5"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Managements</div>
                                                                      <h3 class="mb-0">{{ managements }}</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="badge-circle badge-circle-lg badge-circle-light-primary mx-auto mb-50">
                                                                             <i class="bx bx-file-blank text-primary font-medium-5"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Scénarios</div>
                                                                      <h3 class="mb-0">{{ scenarios }}</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>

                                   </div>
                                           <br>
                                   <div class="h4 col-12 card"><div class="card-content"><div class="h4 card-body text-center">Statistiques</div></div></div>
                                           <br>
                                   <div class="row">
                                          <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                                                 <div class="card">
                                                        <div class="card-header d-flex justify-content-between align-items-center pb-1">
                                                               <h4 class="card-title">Utilisateurs</h4>
                                                        </div>
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="donut-chart-wrapper">
                                                                             <div id="usersChart" class="d-flex justify-content-center"></div>
                                                                      </div>
                                                                      <ul class="list-inline d-flex justify-content-around mb-0">
                                                                             <li> <span class="bullet bullet-xs bullet-primary mr-50"></span>Cuisinella</li>
                                                                             <li> <span class="bullet bullet-xs bullet-warning mr-50"></span>Schmidt</li>
                                                                      </ul>
                                                               </div>
                                                        </div>
                                                 </div>

                                                 <script>
                                                        var e="#5A8DEE", t="#39DA8A", o="#FF5B5C", a="#FDAC41", r="#00CFDD", s="#E2ECFF", i="#ffeed9", l="#828D99";
                                                        var options = {
                                                               chart: {
                                                                      type: 'donut',
                                                                      width: 300,
                                                                      height: 340
                                                               },
                                                               dataLabels: {
                                                                      enabled: !1
                                                               },
                                                               series: [22, 32],
                                                               stroke: {
                                                                      width: 0,
                                                                      lineCap: "round"
                                                               },
                                                               colors:[a, e],
                                                               labels:["Schmidt", "Cuisinella"],
                                                               plotOptions: {
                                                                      pie: {
                                                                             donut: {
                                                                                    labels: {
                                                                                           show:!0, name: {
                                                                                                  show: !0, fontSize: "15px", colors: "#596778", offsetY: 20, fontFamily: "IBM Plex Sans"
                                                                                           }
                                                                                           , value: {
                                                                                                  show:!0, fontSize:"26px", fontFamily:"Rubik", color:"#475f7b", offsetY:-20, formatter:function(e) {
                                                                                                         console.log(e);
                                                                                                         return e
                                                                                                  }
                                                                                           }
                                                                                           , total: {
                                                                                                  show:!0, label:"Utilisateurs", color:l, formatter:function(e) {
                                                                                                         return e.globals.seriesTotals.reduce(function(e, t) {
                                                                                                                        return e+t
                                                                                                                 }
                                                                                                                 , 0)
                                                                                                  }
                                                                                           }
                                                                                    }
                                                                             }
                                                                      }
                                                               },
                                                               legend : {
                                                                      show: false
                                                               }
                                                        };
                                                        var chart = new ApexCharts(
                                                                document.querySelector("#usersChart"),
                                                                options
                                                        );

                                                        chart.render();

                                                 </script>

                                          </div>
                                          <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                                                 <div class="card">
                                                        <div class="card-header d-flex justify-content-between align-items-center pb-1">
                                                               <h4 class="card-title">Inscriptions</h4>
                                                        </div>
                                                        <div class="card-content">
                                                               <div class="card-body">
                                                                      <div class="d-flex align-items-end justify-content-around" style="position: relative;">
                                                                             <div id="column-chart" style="min-height: 60px;">
                                                                             </div>
                                                                             <script>
                                                                                    var options = {
                                                                                           series: [{
                                                                                                  name: 'Cuisinella',
                                                                                                  data: [44, 55, 41, 67, 22, 43, 12, 72, 42, 52, 36, 52]
                                                                                           }, {
                                                                                                  name: 'Schmidt',
                                                                                                  data: [13, 23, 20, 8, 13, 27, 52, 15, 12, 12, 36, 52]
                                                                                           }],
                                                                                           chart: {
                                                                                                  type: 'bar',
                                                                                                  height: 350,
                                                                                                  stacked: false,
                                                                                                  toolbar: {
                                                                                                         show: false
                                                                                                  },
                                                                                                  zoom: {
                                                                                                         enabled: false
                                                                                                  }
                                                                                           },
                                                                                           plotOptions: {
                                                                                                  bar: {
                                                                                                         horizontal: false,
                                                                                                  },
                                                                                           },
                                                                                           xaxis: {
                                                                                                  categories: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"],
                                                                                                  labels: {
                                                                                                         style: {
                                                                                                                colors: [],
                                                                                                                fontSize: '16px',
                                                                                                         },

                                                                                                  },
                                                                                           },
                                                                                           legend: {
                                                                                                  show: false,
                                                                                           },
                                                                                           fill: {
                                                                                                  opacity: 1
                                                                                           }
                                                                                    };

                                                                                    var chart = new ApexCharts(document.querySelector("#column-chart"), options);
                                                                                    chart.render();
                                                                             </script>
                                                                      </div>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                                                 <div class="card">
                                                        <div class="card-header d-flex justify-content-between align-items-center pb-1">
                                                               <h4 class="card-title">Visites</h4>
                                                        </div>
                                                        <div class="card-content">
                                                               <div class="card-body" style="position: relative;">
                                                                      <div class="donut-chart-wrapper">
                                                                             <div id="radial-chart" class="d-flex justify-content-center">
                                                                             </div>
                                                                             <script>

                                                                                    var e="#5A8DEE", a="#FF5B5C", t="#FDAC41", r="#00CFDD", o="#828D99";
                                                                                    var options = {
                                                                                           series: [78, 54],
                                                                                           chart: {
                                                                                                  width: 300,
                                                                                                  height: 340,
                                                                                                  type: 'radialBar',
                                                                                           },
                                                                                           colors:[e, a, t],
                                                                                           plotOptions: {
                                                                                                  radialBar: {
                                                                                                         track: {
                                                                                                                margin: 10, background: "#fff"
                                                                                                         },
                                                                                                         dataLabels: {
                                                                                                                name: {
                                                                                                                       fontSize: '22px',
                                                                                                                },
                                                                                                                value: {
                                                                                                                       fontSize: '16px', formatter:function(e) {
                                                                                                                              console.log(e);
                                                                                                                              return e ;
                                                                                                                       }
                                                                                                                },
                                                                                                                total: {
                                                                                                                       show: true,
                                                                                                                       label: 'Visites',
                                                                                                                       color: o,
                                                                                                                       formatter: function (e) {
                                                                                                                              // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                                                                                                                              return e.globals.seriesTotals.reduce(function(e, t) {
                                                                                                                                             return e+t
                                                                                                                                      }
                                                                                                                                      , 0)
                                                                                                                       }
                                                                                                                }
                                                                                                         }
                                                                                                  }
                                                                                           },
                                                                                           labels: ['Cuisinella', 'Schmidt'],
                                                                                    };

                                                                                    var chart = new ApexCharts(document.querySelector("#radial-chart"), options);
                                                                                    chart.render();
                                                                             </script>
                                                                             <ul class="list-inline d-flex justify-content-around mb-0">
                                                                                    <li> <span class="bullet bullet-xs bullet-primary mr-50"></span>Cuisinella</li>
                                                                                    <li> <span class="bullet bullet-xs bullet-danger mr-50"></span>Schmidt</li>
                                                                             </ul>
                                                                      </div>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                   </div>
                                           <br>
                                   <div class="h4 col-12 card"><div class="card-content"><div class="h4 card-body text-center">Fiches Appréciations</div></div></div>
                                            <br>
                                   <div class="row">
                                          <div class="col">
                                                 <a href="{{ path('admin_fiches_note', {note : 4}) }}" class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="mx-auto mb-50">
                                                                             <i class="far fa-grin fa-3x" style="color: green;"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">0 Votes</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </a>
                                          </div>
                                          <div class="col">
                                                 <a href="{{ path('admin_fiches_note', {note : 3}) }}" class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="mx-auto mb-50">
                                                                             <i class="far fa-smile fa-3x" style="color: limegreen;"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">0 Votes</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </a>
                                          </div>
                                          <div class="col">
                                                 <a href="{{ path('admin_fiches_note', {note : 2}) }}" class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="mx-auto mb-50">
                                                                             <i class="far fa-meh fa-3x" style="color: orange;"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">0 Votes</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </a>
                                          </div>
                                          <div class="col">
                                                 <a href="{{ path('admin_fiches_note', {note : 1}) }}" class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="mx-auto mb-50">
                                                                             <i class="far fa-frown fa-3x" style="color: red;"></i>
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">0 Votes</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </a>
                                          </div>
                                   </div>
                                            <br>
                                   <div class="h4 col-12 card"><div class="card-content"><div class="h4 card-body text-center">Trophées</div></div></div>
                                          <br>
                                    <div class="row">

                                          <div class="col-12 dashboard-marketing-campaign">
                                                 <div class="card marketing-campaigns">
                                                               <div class="table-responsive ps">
                                                               <table id="table-marketing-campaigns" class="table table-borderless table-marketing-campaigns mb-0">
                                                                      <thead>
                                                                      <tr>
                                                                             <th class="text-center">Nombres d'utilisateurs</th>
                                                                             <th class="text-left">Trophée(s)</th>
                                                                      </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                             <tr>
                                                                                    <td class="py-1 line-ellipsis text-center">
                                                                                           <h4>0</h4>
                                                                                    </td>
                                                                                    <td class="py-1 text-left">
                                                                                                  <img style="filter: grayscale(100);" src="/img/cup.png" alt="card" width="35" height="35">
                                                                                    </td>

                                                                             </tr>
                                                                             <tr>
                                                                                    <td class="py-1 line-ellipsis text-center">
                                                                                           <h4>0</h4>
                                                                                    </td>
                                                                                    <td class="py-1 text-left">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">

                                                                                    </td>
                                                                             </tr>
                                                                             <tr>
                                                                                    <td class="py-1 line-ellipsis text-center">
                                                                                           <h4>0</h4>
                                                                                    </td>
                                                                                    <td class="py-1 text-left">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">
                                                                                    </td>

                                                                             </tr>
                                                                             <tr>
                                                                                    <td class="py-1 line-ellipsis text-center">
                                                                                           <h4>0</h4>
                                                                                    </td>
                                                                                    <td class="py-1 text-left">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">
                                                                                           <img alt="card" src="/img/cup.png" width="35" height="35">
                                                                                    </td>

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

                                   </div>
                                            <br>

                                   <div class="h4 col-12 card"><div class="card-content"><div class="h4 card-body text-center">Résultats 360 Manager</div></div></div>
                                    <br>

                                   <div class="row">
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="font-weight-bold h5 mb-50">360 Manager</div>

                                                                      <div class="mx-auto mb-50">
                                                                             <img alt="card" src="/img/star.png" style="filter: grayscale(100);"  width="50" height="50">
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Moyenne 1</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="font-weight-bold h5 mb-50">360 Manager</div>

                                                                      <div class="mx-auto mb-50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Moyenne 2</div>

                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                                      <div class="mx-auto mb-50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Moyenne 3</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="col">
                                                 <div class="card text-center">
                                                        <div class="card-content">
                                                               <div class="card-body py-1">
                                                                      <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                                      <div class="mx-auto mb-50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                             <img alt="card" src="/img/star.png" width="50" height="50">
                                                                      </div>
                                                                      <div class="text-muted line-ellipsis">Moyenne 4</div>
                                                                      <h3 class="mb-0">0</h3>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                   </div>



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