

{% extends './stocks.html' %}
{% load static %}

{% block content %}
        <div class="container-fluid">
          <div class="container-fluid">
            <div class="card card-plain">
              <div class="card-header card-header-primary">
                <h4 class="card-title">Analyse de la Gestion des Stocks</h4>
                <p class="card-category"> Trier Par : <a style="color:#fff;" href="#">Revenu</a> <span> | </span> <a style="color:#fff;" href="#">Ventes</a> <span> | </span>  <a style="color:#fff;" href="#">Nom</a> </p>
              </div>
              <div class="row">
                {% for pro in products %}
                <div class="col-md-3">
                  <a href="#">
                  <div class="card-body">
                    <div class="card card-stats" style="background-color:#fff;">
                      <div class="card-header card-header-success card-header-icon">
                        <div class="card-icon">
                          <i class="material-icons">shopping_cart</i>
                        </div>
                        <p class="card-category text-success" style="text-align:center;"><small>{{pro.montant_products}} XAF</small></p>
                        <h4 class="card-title"  style="text-align:center;"><small>{{pro.m_name}}</small></h4>
                        <h6 class="card-subtitle" style="color:#333;text-align: center;"><small>{{pro.nb_ventes}} Ventes</small></h6>
                      </div>
                      <div class="card-footer">
                        <div class="stats text-success">
                          <i class="material-icons">date_range</i> Plus d'Info
                        </div>
                      </div>
                    </div>
                  </div>
                  </a>
                </div>
                {% endfor %}
              </div>
              <div class="row">
                  <div class="col-md-4" >
                    <div class="card card-chart" >
                      <div class="card-header card-header-warning">
                        <div class="ct-chart" id="ProductsChart1"></div>
                      </div>
                      <div class="card-body">
                        <h4 class="card-title">Ventes par Produit</h4>
                          <p class="card-category">
                          <span class="text-success"><i class="fa fa-long-arrow-up"></i> 90% </span>par rapport à la Semaine Passée.</p>
                      </div>
                      <div class="card-footer">
                        <div class="stats">
                          <i class="material-icons">access_time</i> Mois Actuel
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card card-chart">
                      <div class="card-header card-header-danger">
                        <div class="ct-chart" id="ProductsChart2"></div>
                      </div>
                      <div class="card-body">
                        <h4 class="card-title">Ventes de la Semaine Passée</h4>
                          <p class="card-category">
                          <span class="text-danger"> Chiffres de la Semaine précédante </span>
                      </div>
                      <div class="card-footer">
                        <div class="stats">
                          <i class="material-icons">access_time</i> Mois Précédant
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card card-chart">
                      <div class="card-header card-header-success">
                        <div class="ct-chart" id="ProductsChart3"></div>
                      </div>
                      <div class="card-body">
                        <h4 class="card-title">Bénéfice par Articles</h4>
                          <p class="card-category">
                          <span class="text-success"><i class="fa fa-long-arrow-up"></i> 90% </span>par rapport à la Semaine Passée.</p>
                      </div>
                      <div class="card-footer">
                        <div class="stats">
                          <i class="material-icons">access_time</i> Mois Actuel
                        </div>
                      </div>
                    </div>
                  </div>
                </div> 
              </div>
            </div>
          </div>
        </div>
{% endblock %}
{% block script %}
<script type="text/javascript">
      md2 = {
        initDashboardPageCharts: function() {
          if ($('#ProductsChart1').length != 0 ) {
            /* ----------==========     Daily Sales Chart initialization    ==========---------- */


            dataMonthlySalesChart = {
              labels: ['S1', 'S2', 'S3', 'S4', 'S5'],

              series: [
                [0,0,0,18,0]
              ]
            };

            optionsDailySalesChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
              }),
              low: 0,
              high: 15, 
              chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
              },
            }

            optionsMonthlySalesChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
              }),
              low: 0,
              high: 50, 
              chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
              },
            }

            /* ----------==========     Completed Tasks Chart initialization    ==========---------- */

            dataCompletedTasksChart = {
              labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
              series: [
                [230, 750, 450, 300, 280, 240, 200, 190]
              ]
            };

            optionsCompletedTasksChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
              }),
              low: 0,
              high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
              chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
              }
            }



            /* ----------==========     Emails Subscription Chart initialization    ==========---------- */

            var dataWebsiteViewsChart = {
              labels: [{% for p in products_short %} "{{p.mini_name}}", {% endfor %}"Tous"],
              series: [
                [{% for p in products_short %} {{p.nb_ventes}}, {% endfor %}25]

              ]
            };
            var optionsWebsiteViewsChart = {
              axisX: {
                showGrid: false
              },
              low: 0,
              high: 20,
              chartPadding: {
                top: 0,
                right: 5,
                bottom: 0,
                left: 0
              }
            };
            var responsiveOptions = [
              ['screen and (max-width: 640px)', {
                seriesBarDistance: 5,
                axisX: {
                  labelInterpolationFnc: function(value) {
                    return value[0];
                  }
                }
              }]
            ];
            var websiteViewsChart = Chartist.Bar('#ProductsChart1', dataWebsiteViewsChart, optionsWebsiteViewsChart, responsiveOptions);
            var websiteViewsChart2 = Chartist.Bar('#ProductsChart2', dataWebsiteViewsChart, optionsWebsiteViewsChart, responsiveOptions);
            var websiteViewsChart3 = Chartist.Bar('#ProductsChart3', dataWebsiteViewsChart, optionsWebsiteViewsChart, responsiveOptions);
            //start animation for the Emails Subscription Chart
            md2.startAnimationForBarChart(websiteViewsChart);
            md2.startAnimationForBarChart(websiteViewsChart2);
            md2.startAnimationForBarChart(websiteViewsChart3);
          }
        },

        startAnimationForLineChart: function(chart) {

          chart.on('draw', function(data) {
            if (data.type === 'line' || data.type === 'area') {
              data.element.animate({
                d: {
                  begin: 600,
                  dur: 700,
                  from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                  to: data.path.clone().stringify(),
                  easing: Chartist.Svg.Easing.easeOutQuint
                }
              });
            } else if (data.type === 'point') {
              seq++;
              data.element.animate({
                opacity: {
                  begin: seq * delays,
                  dur: durations,
                  from: 0,
                  to: 1,
                  easing: 'ease'
                }
              });
            }
          });

          seq = 0;
        },
        startAnimationForBarChart: function(chart) {

          chart.on('draw', function(data) {
            if (data.type === 'bar') {
              seq2++;
              data.element.animate({
                opacity: {
                  begin: seq2 * delays2,
                  dur: durations2,
                  from: 0,
                  to: 1,
                  easing: 'ease'
                }
              });
            }
          });

          seq2 = 0;
        }
      }
      md2.initDashboardPageCharts();
</script>
{% endblock %}