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

{% block content %}
        <div class="container-fluid">
          <div class="row">
          	<span class="btn btn-primary">Journalier</span>
          	<span class="btn">Hebdomadaire</span>
          	<span class="btn">Mensuel</span>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">Liste des Bénéfices de <b> {{actual_institution}}</b></h4>
                <form method="POST" action="/stock/trans/sort/" style="display:flex; color: #fff;">
                  {% csrf_token %}
                  <p class=" text-white"> <label>Date de Debut</label> <input style="color:#fff;" value="{{date_start}}" name="date_start" type='date' class="form-control" > </p>
                  <p class=" text-white px-2"> <label>Date de Fin</label> <input style="color:#fff;" value="{{date_end}}" name="date_end" type='date' class="form-control" > </p>
                   
                  <p class="pt-2"> <label>&nbsp;</label> <input type="submit" value="Filtrer" class="btn  " name=""> </p>
                  </form> 
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table">
                      <thead class=" text-primary">
                        <th>
                          Date
                        </th>
                        <th>
                          Revenus
                        </th>
                        <th>
                          Dépenses
                        </th>
                        <th>
                          Différence Nette
                        </th>
                        <th>
                          Nombre de Ventes
                        </th>
                        <th>
                          
                        </th>
                      </thead>
                      <tbody>
                        {% for b in benefices %}
                        <tr class="{% if b.som > b.lost %} text-success {% else %} text-danger {% endif %}">
                          <td>
                            {{b.date}}
                          </td>
                          <td>
                            {{b.som}} XAF
                          </td>
                          <td>
                            {{b.lost}} XAF
                          </td>
                          <td>
                            {{b.nb_ventes}} Ventes
                          </td>
                          <td>
                            
                          </td>
                          <td class="text-primary">
                            Infos
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          <div class="row">
            <div class="col-md-4">
              <div class="card card-chart">
                <div class="card-header card-header-success">
                  <div class="ct-chart" id="dailySalesChart"></div>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Rapports des Ventes</h4>
                                    <p class="card-category">
                    <span class="text-success"><i class="fa fa-long-arrow-up"></i> 0% </span>par rapport à la Semaine Passée.</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> Semaine Actuelle
                  </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="dailySalesChart2"></div>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Rapports de la Semaine Passée</h4>
                  <p class="card-category">
                    <span class="text-success"><i class="fa fa-long-arrow-up"></i> &nbsp;</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> Semaine Passée
                  </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="monthlySalesChart"></div>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Rapports des Ventes Mensuel</h4>
                       <p class="card-category">
                    <span class="text-success">&nbsp;</span></p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> Mois Acctuel
                  </div>
                </div>
              </div>
            </div>           
          </div>
{% endblock %}
{% block script %}
<script type="text/javascript">
      md2 = {
        initDashboardPageCharts: function() {

          if ($('#dailySalesChart').length != 0 ) {
            /* ----------==========     Daily Sales Chart initialization    ==========---------- */

            dataDailySalesChart = {
              labels: ['L', 'M', 'M', 'J', 'V', 'S', 'D','L'],

              series: [
                [{% for b in benefs_week %}{{b.nb_ventes}},{% endfor %},0]
              ]
            };

            dataDailySalesChart2 = {
              labels: ['L', 'M', 'M', 'J', 'V', 'S', 'D','L'],

              series: [
                [{% for b in benefs_pre_week %}{{b.nb_ventes}},{% endfor %},0]
              ]
            };

            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
              },
            }


            var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
            var dailySalesChart2 = new Chartist.Line('#dailySalesChart2', dataDailySalesChart2, optionsDailySalesChart);
            var monthSalesChart = new Chartist.Line('#monthlySalesChart', dataMonthlySalesChart, optionsMonthlySalesChart);
            md2.startAnimationForLineChart(dailySalesChart);
            md2.startAnimationForLineChart(dailySalesChart2);
            md2.startAnimationForLineChart(dataMonthlySalesChart);

            /* ----------==========     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
              }
            }

            var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);

            // start animation for the Completed Tasks Chart - Line Chart
            md2.startAnimationForLineChart(completedTasksChart);


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

            var dataWebsiteViewsChart = {
              labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
              series: [
                [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]

              ]
            };
            var optionsWebsiteViewsChart = {
              axisX: {
                showGrid: false
              },
              low: 0,
              high: 1000,
              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('#websiteViewsChart', dataWebsiteViewsChart, optionsWebsiteViewsChart, responsiveOptions);

            //start animation for the Emails Subscription Chart
            md2.startAnimationForBarChart(websiteViewsChart);
          }
        },

        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 %}