{% extends "layout.html.twig" %}

{% block title %}Conversions Report{% endblock %}

{% block pageheader %}Conversions Report{% endblock %}

{% block body %}
<div class="row">
  <form name="campaign-period" class="right-side" action="{{ path('conversionsReport') }}" method="post">
    <div class="col-md-3">
      <select class="form-control combo-selected" name="campaign">
        {% for key, value in selectCampaigns %}
        <option value="{{key}}" {% if campaignid == key %}selected=selected class="combo-selected"{% endif %}>{{value}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2 col-md-offset-2">
      <div class="specific-period-container">
        <div class="input-group date">
          <input type="text" id="period-start" name="period-start" class="form-control" placeholder="Start Date" title="Specific Start Date" value="{{formStartPeriod}}"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="specific-period-container">
        <div class="input-group date">
          <input type="text" id="period-end" name="period-end" class="form-control" placeholder="End Date" title="Specific End Date" value="{{formEndPeriod}}"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <select class="form-control combo-selected" id="period" name="period">
        {% for key, value in selectPeriods %}
        <option value="{{key}}" {% if period == key %}selected=selected class="combo-selected"{% endif %}>{{value}}</option>
        {% endfor %}
      </select>
    </div>
  </form>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <canvas id="barChartDay" height="200px"></canvas>
          </div>
          <div class="col-md-6">
            <canvas id="barChartRange" height="200px"></canvas>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-offset-3 col-md-6">
            <canvas id="funnelChart" height="200px"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block specificJS %}
  <script src="{{ asset('Dashboard/js/chart.funnel.js') }}" charset="utf-8"></script>
  <script type="text/javascript">
    var barChartDay = null;
    var barChartMoment = null;
    var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};
    var daysName = {{daysName|json_encode|raw}};
    var momentsName = {{momentsName|json_encode|raw}};
    var dataGroupDays = {{dataGroupDays|json_encode|raw}};
    var dataGroupMoments = {{dataGroupMoments|json_encode|raw}};
    var conversionsColors = {{conversionsColors|json_encode|raw}};

    var dataFunnel = {{dataFunnel|json_encode|raw}};
    var tagsName = {{tagsName|json_encode|raw}};
    var funnelChart = null;

    $(document).ready(function(){
      if(isSpecificPeriod)
        $('div.specific-period-container').fadeIn(250);

      $('form[name=campaign-period] .input-group.date').datepicker({
        format: "yyyy-mm-dd",
        maxViewMode: 2,
        language: 'en'
      });

      // Soumission du formulaire
      $('form.right-side select[name=period]').change(function(){
        var optValue = $(this).val();
        if(optValue !== "specific"){
          $('form.right-side').submit();
          displayLoader();
        }
        else
          $('div.specific-period-container').fadeIn(500);
      });
      $('form.right-side select[name=campaign], form.right-side select[name=byConversion], form.right-side input[name^=period-]').change(function(){
        $('form.right-side').submit();
        displayLoader();
      });

      // Graphique days
      var dsDays = [];
      dataGroupDays.forEach(function(v, k){
        dsDays.push({
          label: v['label'],
          backgroundColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          borderColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba("+conversionsColors[k]['rgba']+",0.7)",
          hoverBorderColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          data: v['days']
        });
      });
      var data = {
          labels: daysName,
          datasets: dsDays
      };
      if(dataGroupDays.length > 0) {
        barChartDay = new Chart(document.getElementById('barChartDay').getContext('2d'), {
            type: 'bar',
            data: data,
            options: {
              defaultFontFamily: "'Open Sans'",
              title: {
                display: true,
                text: "% of Conversions Type by Day of Week",
                fontSize: 14
              },
              tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItems, data) {
                        return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' %';
                    }
                }
              },
              legend: {
                fullWidth: false,
                labels: {
                  boxWidth: 12,
                  fontSize: 11,
                },
              },
              scales: {
                xAxes: [{
                  display: true,
                  gridLines: {
                    display: false
                  },
                  ticks: {
                    display: true
                  }
                }],
                yAxes: [{
                  display: true,
                  gridLines: {
                    drawBorder: false
                  },
                  scaleLabel: {
                    display: true,
                    labelString: "% of conversions"
                  },
                  ticks: {
                    display: true,
                    beginAtZero: true
                  }
                }]
              }
            }
        });
      }
      else {
        noData("#barChartDay", "% of Conversions Type by Day of Week");
      }

      // Graphique moments
      var dsMoments = [];
      dataGroupMoments.forEach(function(v, k){
        dsMoments.push({
          label: v['label'],
          backgroundColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          borderColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba("+conversionsColors[k]['rgba']+",0.7)",
          hoverBorderColor: "rgba("+conversionsColors[k]['rgba']+",1)",
          data: v['moments']
        });
      });
      var data = {
          labels: momentsName,
          datasets: dsMoments
      };
      if(dataGroupMoments.length > 0) {
        barChartRange = new Chart(document.getElementById('barChartRange').getContext('2d'), {
            type: 'bar',
            data: data,
            options: {
              defaultFontFamily: "'Open Sans'",
              title: {
                display: true,
                text: "% of Conversions Type by Time of Day",
                fontSize: 14
              },
              tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItems, data) {
                        return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' %';
                    }
                }
              },
              legend: {
                fullWidth: false,
                labels: {
                  boxWidth: 12,
                  fontSize: 11,
                },
              },
              scales: {
                xAxes: [{
                  display: true,
                  gridLines: {
                    display: false,
                    drawBorder: false
                  },
                  ticks: {
                    display: true
                  }
                }],
                yAxes: [{
                  display: true,
                  gridLines: {
                    drawBorder: false
                  },
                  scaleLabel: {
                    display: true,
                    labelString: "% of conversions"
                  },
                  ticks: {
                    beginAtZero: true
                  }
                }]
              }
            }
        });
      }
      else {
        noData("#barChartRange", "% of Conversions Type by Time of Day");
      }

      // Tunnel de conversions
      if(sumArray(dataFunnel) > 0) {
        funnelChart = new Chart(document.getElementById('funnelChart').getContext('2d'), {
            type: 'funnel',
            data: {
              datasets: [{
                data: dataFunnel,
                backgroundColor: [
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(247, 202, 24, 1)","rgba(37, 116, 169, 1)"
                ],
                hoverBackgroundColor: [
                  "rgba(192, 57, 43,0.7)","rgba(102, 51, 153,0.7)","rgba(38, 166, 91,0.7)",
                  "rgba(247, 202, 24,0.7)","rgba(37, 116, 169,0.7)"
                ]
            }],
            labels: tagsName,
            },
            options: {
              defaultFontFamily: "'Open Sans'",
              title: {
                display: true,
                text: "Conversions Funnel",
                fontSize: 14
              },
              tooltips: {
                backgroundColor: 'rgba(0,0,0,1)',
                xPadding: 15,
                yPadding: 12,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
                    }
                }
              },
              legend: {
                labels: {
                  boxWidth: 12,
                  fontSize: 11,
                },
              },
              hover: {
                animationDuration: 0
              },
              animation: {
                onComplete: function () {

                  var ctx = this.chart.ctx;
                  ctx.textAlign = "center";
                  ctx.textBaseline = "middle";
                  ctx.font = "bold 16px Arial";
                  ctx.fillStyle = "Black";
                  var that = this;

                  this.chart.config.data.datasets[0]._meta[2].data.forEach(function(p) {
                    var valueFormatted = 0;
                    if(p._index == 0)
                      ctx.fillText('100 %', p._model.x, p._model.y + ((that.chart.height / that.chart.config.data.datasets[0].data.length) / 2 - 9));
                    else {
                      if(p._chart.config.data.datasets[p._datasetIndex].data[p._index] > 0)
                        valueFormatted = Math.round((p._chart.config.data.datasets[p._datasetIndex].data[p._index] / p._chart.config.data.datasets[p._datasetIndex].data[p._index - 1]) * 100);
                      else
                        valueFormatted = 0;
                      ctx.fillText(valueFormatted + ' %', p._model.x, p._model.y + ((that.chart.height / that.chart.config.data.datasets[0].data.length) / 2 - 9));
                    }
                  });
                }
              }
            }
        });
      }
      else {
        noData("#funnelChart", "Conversions Funnel");
      }
    });

    function noData(selector, title){
      $(selector).parent().append("<h5 style='text-align: center; font-weight: bold;'>"+title+"</h5>");
      $(selector).parent().append("<img class='no-data center-block' src='{{ asset('Dashboard/img/no-data.png') }}'></img>");
      $(selector).remove();
    }
    function sumArray(arr){
      var total = 0;
      arr.forEach(function(item, index, arr){
        total += item;
      });

      return total;
    }
  </script>
{% endblock %}