{% extends 'guichet/event_base.html' %}

{% load static %}

{% block adminstatstab %} class="active"{% endblock %}

{% block eventcontent %}

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h4>Nombre de places</h4>
    </div>

    <div class="table-responsive">
      <table class="table">

        <tr>
          <th>Billet</th>
          <th>Toutes</th>
          <th>En attente de paiement<br/>(dont en attente de document)</th>
          <th>Payées<br/>(dont en attente de document)</th>
          <th>En opposition</th>
          <th>Valides</th>
          <th>Entrées</th>
        </tr>

        {% for ticket in tickets %}
          <tr>
            <th>{{ ticket.name }}</th>
            <td>{{ ticket.total }}</td>
            <td>{{ ticket.not_paid }} ({{ ticket.cannot_paid }})</td>
            <td>{{ ticket.paid }} ({{ ticket.cannot_enter }})</td>
            <td>{{ ticket.opposed }}({{ ticket.refund }})</td>
            <td>{{ ticket.valid }}</td>
            <td>{{ ticket.used }}</td>
          </tr>
        {% endfor %}

      </table>
    </div>

  </div>

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h4>Détails des options</h4>
    </div>

    <div class="table-responsive">
      <table class="table">

        <tr>
          <th>Nom de l'option</th>
          <th>Nombre de ventes</th>
        </tr>

        {% for option in options %}
          <tr>
            <td>{% if option.group_name %}{{ option.group_name }} - {% endif %}{{ option.name }}</td>
            <td>{{ option.count }}</td>
          </tr>
        {% endfor %}
      </table>
    </div>

  </div>

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h4>Moyen de paiement et bénéfices</h4>
    </div>

    <div class="table-responsive">
      <table class="table">

        <tr>
          <th>Moyen de paiement</th>
          <th>Nombre de ventes</th>
          <th>Bénéfices</th>
          <th>Taxes</th>
          <th>Remboursement</th>
          <th>Bénéfices réels</th>
        </tr>

        {% for method in methods %}
          <tr{% if forloop.last %} style="font-weight: bold;"{% endif %}>
            <td>{{ method.name }}</td>
            <td>{{ method.count }}</td>
            <td>{{ method.profit }} €</td>
            <td>{{ method.fee }} €</td>
            <td>{{ method.refund }} €</td>
            <td>{{ method.real_profit }} €</td>
          </tr>
        {% endfor %}

      </table>
    </div>

  </div>

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h4>Réservations au cours du temps</h4>
    </div>

    <div class="panel-body">
      <div class="row chart">
        <canvas id="chart"></canvas>
      </div>
    </div>
  </div>
  {% if tickets|length > 3 %}
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h4>Proportions des participants</h4>
      </div>

      <div class="panel-body">
        <div class="col-sm-12 col-xs-12 col-md-6">
          <div class="row pie">
            <canvas id="pie"></canvas>
          </div>
        </div>

        <div class="col-sm-12 col-xs-12 col-md-6">
          <div class="row bar">
            <canvas id="bar"></canvas>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  {% if used_registrations %}
    <div class="panel panel-primary">

      <div class="panel-heading">
        <h4>Entrées au cours du temps</h4>
      </div>

      <div class="panel-body">
        <div class="row chart">
          <canvas id="used-chart"></canvas>
        </div>
      </div>
    </div>
  {% endif %}

{% endblock %}


{% block js_foot %}
  {{ block.super }}

  <script src="{% static 'js/moment.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/Chart.min.js' %}" type="text/javascript"></script>

  <script type="text/javascript">
      labels = [];
      places = [];

      function getRandomColor() {
          var letters = '0123456789ABCDEF'.split('');
          var color = '#';
          for (var i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
      }


      {% for reg in registrations %}
          places.push({{ forloop.counter }});
          labels.push('{{ reg|date:"c" }}');
      {% endfor %}

      $(document).ready(function () {
          // Paramètres et données du chart des ventes
          var data = {
              labels: labels,
              datasets: [
                  {
                      label: "Réservations au cours du temps",
                      backgroundColor: "rgba(245,100,7,0.5)",
                      borderColor: "rgba(7,245,31,1)",
                      pointBorderColor: "rgba(7,245,31,1)",
                      pointBackgroundColor: "rgba(7,245,31,1)",
                      data: places,
                  }
              ]
          };
          var options = {
              scales: {
                  xAxes: [{
                      type: 'time'
                  }]
              },
              bezierCurve: true,

              //Number - Tension of the bezier curve between points
              bezierCurveTension: 0.4,
          };

          // Création du chart des ventes
          var ctx = document.getElementById("chart");
          var myLineChart = new Chart(ctx, {
              type: 'line',
              data: data,
              options: options
          });

      });


      {% if tickets|length > 2 %}

          radar_labels = [];
          radar_data = [];
          radar_color = [];

          {% for ticket in tickets_radar %}
              radar_labels.push('{{ ticket.name|escapejs }}');
              radar_data.push({{ ticket.total }});
              radar_color.push(getRandomColor());

          {% endfor %}

          $(document).ready(function () {
              var data = {
                  labels: radar_labels,
                  datasets: [
                      {
                          label: "Proportions de billets vendus",
                          backgroundColor: radar_color,
                          data: radar_data
                      }
                  ]

              };
              var options = {
                  responsive: true,
                  segmentShowStroke: false,
                  animateRotate: true,
                  animateScale: false,
                  percentageInnerCutout: 50,
              };

              var ctx = document.getElementById("pie");

              var myRadarChart = new Chart(ctx, {
                  type: 'pie',
                  data: data,
                  options: options
              });

          });

          $(document).ready(function () {
              var data = {
                  labels: radar_labels,
                  datasets: [
                      {
                          label: "Proportions de billets vendus",
                          backgroundColor: radar_color,
                          data: radar_data
                      }
                  ]

              };
              var options = {
                  responsive: true,
                  scaleBeginAtZero: true,
                  scaleShowGridLines: true,

              };

              var ctx = document.getElementById("bar");

              var myRadarChart = new Chart(ctx, {
                  type: 'bar',
                  data: data,
                  options: options
              });

          });

      {% endif %}

      {% if used_registrations %}

          used_labels = [];
          used_places = [];
          {% for reg in used_registrations %}
              used_places.push({{ forloop.counter }});
              used_labels.push('{{ reg|date:"c" }}');
          {% endfor %}

          $(document).ready(function () {
              // Paramètres et données du chart des ventes
              var data = {
                  labels: used_labels,
                  datasets: [
                      {
                          label: "Entrées au cours du temps",
                          backgroundColor: "rgba(245,100,7,0.5)",
                          borderColor: "rgba(7,245,31,1)",
                          pointBorderColor: "rgba(7,245,31,1)",
                          pointBackgroundColor: "rgba(7,245,31,1)",
                          data: used_places,
                      }
                  ]
              };

              var options = {
                  responsive: true,
                  scales: {
                      xAxes: [{
                          type: 'time'
                      }]
                  }
              };

              // Création du chart des ventes
              var ctx = document.getElementById("used-chart");
              var myUsedLineChart = new Chart(ctx, {
                  type: 'line',
                  data: data,
                  options: options
              });
          });
      {% endif %}


  </script>

{% endblock %}