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

{% block title %}Contexts Report{% endblock %}

{% block pageheader %}Contexts Report{% endblock %}

{% block body %}
<div class="row">
  <div class="col-md-12">
    <form name="campaign-period" class="right-side" action="{{ path('performanceReport') }}" method="post">
      <div class="row">
        <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">
          <select class="form-control combo-selected" name="byConversion">
          </select>
        </div>
        <div class="col-md-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>
      </div>
    </form>
  </div>
</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="barChartCategories" height="200px"></canvas>
          </div>
          <div class="col-md-6">
            <canvas id="barChartGeo" height="200px"></canvas>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-md-6">
            <canvas id="donutChart" height="150px"></canvas>
          </div>
          <div class="col-md-6">
            <canvas id="barChartRangeOfTime" height="150px"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block specificJS %}
  <script type="text/javascript">
    var barChartCategories = null;
    var barChartGeo = null;
    var donutChart = null;
    var barChartRangeOfTime = null;
    var conversions = {{selectByConversions|json_encode|raw}};
    var isSpecificPeriod = {% if isSpecificPeriod %}true{% else %}false{% endif %};
    var dataCategory = {{dataCategory|json_encode|raw}};
    var labelCategory = {{labelCategory|json_encode|raw}};
    var dataRegion = {{dataRegion|json_encode|raw}};
    var labelRegion = {{labelRegion|json_encode|raw}};
    var dataActifsPassifs = {{dataActifsPassifs|json_encode|raw}};
    var dataRangeOfTime = {{dataRangeOfTime|json_encode|raw}};
    var labelRangeOfTime = {{labelRangeOfTime|json_encode|raw}};
    var campaignid = "{{ campaignid }}";
    var conversionid = "{{ byConversion }}";

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

      if(campaignid != "all"){
        $('form.right-side select[name=byConversion]').empty();
        if(conversions[campaignid] === undefined || conversions[campaignid] === null){
          $('form.right-side select[name=byConversion]').append('<option value="all" class="combo-selected">All Conversions</option>');
          $('form.right-side select[name=byConversion]').val('all');
        }
        else {
          $.each(conversions[campaignid]['tag'], function(k, v){
            var isTheOne = "";
            if(v.id == conversionid)
              isTheOne = "selected=selected ";
            $('form.right-side select[name=byConversion]').append('<option value="'+v.id+'" '+isTheOne+'class="combo-selected">'+v.name+'</option>');
          });
        }
        $('form.right-side select[name=byConversion]').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]').change(function(){
        if($(this).val() !== "all") {
          $('form.right-side select[name=byConversion]').empty();
          if(conversions[$(this).val()] === undefined || conversions[$(this).val()] === null){
            $('form.right-side select[name=byConversion]').append('<option value="all" class="combo-selected">All Conversions</option>');
            $('form.right-side select[name=byConversion]').val('all');
            $('form.right-side').submit();
            displayLoader();
          }
          else {
            $('form.right-side select[name=byConversion]').append('<option value="" class="combo-selected">Select conversions</option>');
            $.each(conversions[$(this).val()]['tag'], function(k, v){
              $('form.right-side select[name=byConversion]').append('<option value="'+v.id+'" class="combo-selected">'+v.name+'</option>');
            });
          }
          $('form.right-side select[name=byConversion]').fadeIn(250);
        }
        else {
          $('form.right-side select[name=byConversion]').fadeOut(100);
          $('form.right-side select[name=byConversion]').val('all');
          $('form.right-side').submit();
          displayLoader();
        }
      });
      $('form.right-side select[name=byConversion], form.right-side input[name^=period-]').change(function(){
        $('form.right-side').submit();
        displayLoader();
      });

      // Graphique categories
      var ctx = document.getElementById("barChartCategories").getContext("2d");
      if(sumArray(dataCategory) > 0) {
        barChartCategories = new Chart(ctx, {
            data: {
              datasets: [{
                data: dataCategory,
                borderColor: [
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)"
                ],
                backgroundColor: [
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)"
                ],
                hoverBackgroundColor: [
                  "rgba(192, 57, 43,0.7)","rgba(102, 51, 153,0.7)","rgba(38, 166, 91,0.7)",
                  "rgba(37, 116, 169,0.7)","rgba(247, 202, 24,0.7)","rgba(34, 49, 63,0.7)",
                  "rgba(108, 122, 137,0.7)","rgba(249, 105, 14,0.7)","rgba(51, 110, 123,0.7)",
                  "rgba(210, 82, 127,0.7)","rgba(171, 183, 183,0.7)","rgba(34, 167, 240,0.7)"
                ]
            }],
            labels: labelCategory,
          },
          type: 'horizontalBar',
          options: {
            title: {
              display: true,
              text: "% of Conversions by Context Media",
              fontSize: 14
            },
            legend: {
              display: false
            },
            tooltips: {
              enabled: true,
              callbacks: {
                  label: function(tooltipItem, data) {
                      var value = data.datasets[0].data[tooltipItem.index];
                      var label = data.labels[tooltipItem.index];
                      return value + '%';
                  }
              }
            },
            scales: {
              xAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: "% of conversions"
                },
                ticks: {
                  beginAtZero: true
                }
              }]
            },
            hover: {
              animationDuration: 0
            },
            animation: {
              onComplete: function () {

                // var ctx = this.chart.ctx;
                // ctx.textAlign = "center";
                // ctx.textBaseline = "middle";
                // ctx.font = "bold 11px Arial";
                // ctx.fillStyle = "Black";
                // var that = this;
                //
                // this.chart.config.data.datasets[0]._meta[0].data.forEach(function(p) {
                //   if(p._chart.config.data.datasets[p._datasetIndex].data[p._index] < that.scales['x-axis-0'].ticks[1])
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + '%', p._model.x + 20, p._model.y);
                //   else
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + '%', p._model.x - 25, p._model.y);
                // });
              }
            }
          }
        });
      }
      else {
        noData("#barChartCategories", "% of Conversions by Context Media");
      }

      // Graphique régions
      var ctx = document.getElementById("barChartGeo").getContext("2d");
      if(sumArray(dataRegion) > 0) {
        barChartGeo = new Chart(ctx, {
            data: {
              datasets: [{
                data: dataRegion,
                borderColor: [
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)",
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)",
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)"
                ],
                backgroundColor: [
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)",
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)",
                  "rgba(192, 57, 43, 1)","rgba(102, 51, 153, 1)","rgba(38, 166, 91, 1)",
                  "rgba(37, 116, 169, 1)","rgba(247, 202, 24, 1)","rgba(34, 49, 63, 1)",
                  "rgba(108, 122, 137, 1)","rgba(249, 105, 14, 1)","rgba(51, 110, 123, 1)",
                  "rgba(210, 82, 127, 1)","rgba(171, 183, 183, 1)","rgba(34, 167, 240, 1)"
                ],
                hoverBackgroundColor: [
                  "rgba(192, 57, 43,0.7)","rgba(102, 51, 153,0.7)","rgba(38, 166, 91,0.7)",
                  "rgba(37, 116, 169,0.7)","rgba(247, 202, 24,0.7)","rgba(34, 49, 63,0.7)",
                  "rgba(108, 122, 137,0.7)","rgba(249, 105, 14,0.7)","rgba(51, 110, 123,0.7)",
                  "rgba(210, 82, 127,0.7)","rgba(171, 183, 183,0.7)","rgba(34, 167, 240,0.7)",
                  "rgba(192, 57, 43,0.7)","rgba(102, 51, 153,0.7)","rgba(38, 166, 91,0.7)",
                  "rgba(37, 116, 169,0.7)","rgba(247, 202, 24,0.7)","rgba(34, 49, 63,0.7)",
                  "rgba(108, 122, 137,0.7)","rgba(249, 105, 14,0.7)","rgba(51, 110, 123,0.7)",
                  "rgba(210, 82, 127,0.7)","rgba(171, 183, 183,0.7)","rgba(34, 167, 240,0.7)",
                  "rgba(192, 57, 43,0.7)","rgba(102, 51, 153,0.7)","rgba(38, 166, 91,0.7)",
                  "rgba(37, 116, 169,0.7)","rgba(247, 202, 24,0.7)","rgba(34, 49, 63,0.7)",
                  "rgba(108, 122, 137,0.7)","rgba(249, 105, 14,0.7)","rgba(51, 110, 123,0.7)",
                  "rgba(210, 82, 127,0.7)","rgba(171, 183, 183,0.7)","rgba(34, 167, 240,0.7)"
                ]
            }],
            labels: labelRegion,
          },
          type: 'horizontalBar',
          options: {
            title: {
              display: true,
              text: "% of Conversions by Location",
              fontSize: 14
            },
            legend: {
              display: false
            },
            tooltips: {
              enabled: true,
                callbacks: {
                    label: function(tooltipItem, data) {
                        var value = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
                        return value + '%';
                    }
                }
            },
            scales: {
              xAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: "% of conversions"
                },
                ticks: {
                  beginAtZero: true
                }
              }]
            },
            hover: {
              animationDuration: 0
            },
            animation: {
              onComplete: function () {

                // var ctx = this.chart.ctx;
                // ctx.textAlign = "center";
                // ctx.textBaseline = "middle";
                // ctx.font = "bold 11px Arial";
                // ctx.fillStyle = "Black";
                // var that = this;
                //
                // this.chart.config.data.datasets[0]._meta[1].data.forEach(function(p) {
                //   if(p._chart.config.data.datasets[p._datasetIndex].data[p._index] < that.scales['x-axis-0'].ticks[1])
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + '%', p._model.x + 20, p._model.y);
                //   else
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + '%', p._model.x - 25, p._model.y);
                // });
              }
            }
          }
        });
      }
      else {
        noData("#barChartGeo", "% of Conversions by Location");
      }

      // Graphique actifs / passifs
      var ctx = document.getElementById("donutChart").getContext("2d");
      donutChart = new Chart(ctx, {
          data: {
            datasets: [{
              data: dataActifsPassifs,
              borderColor: [
                "rgba(255, 255, 255, 1)","rgba(255, 255, 255, 1)"
              ],
              backgroundColor: [
                "rgba(108, 122, 137, 1)","rgba(38, 166, 91, 1)"
              ],
              hoverBackgroundColor: [
                "rgba(108, 122, 137,0.7)","rgba(38, 166, 91,0.7)"
              ]
          }],
          labels: ["Active candidates", "Passive candidates"],
        },
        type: 'pie',
        options: {
          title: {
            display: true,
            text: "Active candidates VS Passive candidates",
            fontSize: 14
          },
          tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      var value = data.datasets[0].data[tooltipItem.index];
                      var label = data.labels[tooltipItem.index];
                      return value + '%';
                  }
              }
          },
        }
      });

      // Graphique range of time
      var ctx = document.getElementById("barChartRangeOfTime").getContext("2d");
      if(sumArray(dataRangeOfTime) > 0) {
        barChartRangeOfTime = new Chart(ctx, {
            data: {
              datasets: [{
                data: dataRangeOfTime,
                borderColor: "rgba(38, 166, 91, 1)",
                backgroundColor: "rgba(38, 166, 91, 1)",
                hoverBackgroundColor: "rgba(38, 166, 91,0.7)"
            }],
            labels: labelRangeOfTime,
          },
          type: 'horizontalBar',
          options: {
            title: {
              display: true,
              text: "Time to Convert",
              fontSize: 14
            },
            legend: {
              display: false
            },
            tooltips: {
              enabled: true,
                callbacks: {
                    label: function(tooltipItem, data) {
                        var value = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
                        return value + '%';
                    }
                }
            },
            scales: {
              xAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: "% of conversions"
                },
                ticks: {
                  beginAtZero: true
                }
              }]
            },
            hover: {
              animationDuration: 0
            },
            animation: {
              onComplete: function () {

                // var ctx = this.chart.ctx;
                // ctx.textAlign = "center";
                // ctx.textBaseline = "middle";
                // ctx.font = "bold 11px Arial";
                // ctx.fillStyle = "Black";
                // var that = this;
                //
                // this.chart.config.data.datasets[0]._meta[3].data.forEach(function(p) {
                //   if(p._chart.config.data.datasets[p._datasetIndex].data[p._index] < that.scales['x-axis-0'].ticks[2])
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + ' conversions', p._model.x + 40, p._model.y);
                //   else
                //     ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index] + ' conversions', p._model.x - 50, p._model.y);
                // });
              }
            }
          }
        });
      }
      else {
        noData("#barChartRangeOfTime", "Active candidates VS Passive candidates");
      }
    });

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