{% extends 'user-base.html' %}

{% block content %}

  <div class="graph-card graph-card-shadow graph-container">
    <div style="width: 100%;">
      <canvas id="myChart" width="1200" height="300"></canvas>
    </div>
  </div>

  <div class="graph-card graph-card-shadow graph-container">
      <div id="bar-chart-container" style="position: relative; width: 70%;">
        <canvas id="googleLineChart" width="900" height="300"></canvas>
      </div>
      <div id="pie-chart-container" style="position: relative; width: 30%;">
        <canvas id="googlePieChart" width="200" height="150"></canvas>
      </div>
  </div>

  <div class="graph-card graph-card-shadow graph-container">
      <div style="position: relative; width: 70%;">
        <canvas id="facebookLineChart" width="900" height="300"></canvas>
      </div>
      <div style="position: relative; width: 30%;">
        <canvas id="facebookPieChart" width="200" height="150"></canvas>
      </div>
  </div>
<!--  <div class="graph-card graph-card-shadow graph-container">-->
<!--      <div style="position: relative; width: 70%;">-->
<!--        <canvas id="yelpLineChart" width="900" height="300"></canvas>-->
<!--      </div>-->
<!--      <div style="position: relative; width: 30%;">-->
<!--        <canvas id="yelpPieChart" width="200" height="150"></canvas>-->
<!--      </div>-->
<!--  </div>-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<script>
  var ctx = document.getElementById("myChart");
  var google_line_ctx = document.getElementById("googleLineChart");
  var google_pie_ctx = document.getElementById("googlePieChart");
  var facebook_line_ctx = document.getElementById("facebookLineChart");
  var facebook_pie_ctx = document.getElementById("facebookPieChart");
  var location_id = document.getElementById("location_id").value;
  console.log(location_id.value)
  var endpoint = '/user/api/analytics/all-platform';
  params = {
      "location_id":location_id.trim()
  }
  console.log(params)
  $.ajax({
        type: "get",
        url: endpoint,
        data: params,
        dataType: 'json',
        success: function(data) {
        console.log(data)

        // All data together in a bar chart..
          var myBarChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.google.labels,
              datasets: [
                  {
                    label: 'Google',
                    data: data.google.total_review,
                    borderColor: 'rgb(255, 204, 0)',
                    backgroundColor: 'rgb(255, 204, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: 'Facebook',
                    data: data.facebook.total_review,
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Review of this month in all platforms."
                }
            }
        });

        // Google review charts
        // Google line chart
        var myGoogleLineChart = new Chart(google_line_ctx, {
          type: 'line',
          data: {
              labels: data.google.labels,
              datasets: [
                  {
                    label: '1*',
                    data: data.google.star_rating[0],
                    borderColor: 'rgb(204, 0, 17)',
                    backgroundColor: 'rgb(204, 0, 17)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '2*',
                    data: data.google.star_rating[1],
                    borderColor: 'rgb(255, 119, 0)',
                    backgroundColor: 'rgb(255, 119, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '3*',
                    data: data.google.star_rating[2],
                    borderColor: 'rgb(219, 208, 0)',
                    backgroundColor: 'rgb(219, 208, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '4*',
                    data: data.google.star_rating[3],
                    borderColor: 'rgb(0, 157, 166)',
                    backgroundColor: 'rgb(0, 157, 166)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '5*',
                    data: data.google.star_rating[4],
                    borderColor: 'rgb(0, 97, 0)',
                    backgroundColor: 'rgb(0, 97, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false,

                }]
            },
            options: {
                borderJoinStyle: "bevel",
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Monthly review in Google."
                }
            }
        });

        // Google pie chart
        var myGooglePieChart = new Chart(google_pie_ctx, {
          type: 'pie',
          data: {
              labels: data.google.curr_month.label,
              datasets: [
                  {
                    data: data.google.curr_month.total,
                    backgroundColor: [
                      'rgb(0, 97, 0)',
                      'rgb(0, 157, 166)',
                      'rgb(219, 208, 0)',
                      'rgb(255, 119, 0)',
                       'rgb(204, 0, 17)'
                    ]
                }]
            },
            options: {
              title: {
                display: true,
                fontSize: 12,
               // position: 'bottom',
                text: 'All reviews of this month'
              }
            }
        });
        // Facebook review charts
        // Facebook line chart
        var myFacebookLineChart = new Chart(facebook_line_ctx, {
          type: 'line',
          data: {
              labels: data.facebook.labels,
              datasets: [
                  {
                    label: 'Not Recommended',
                    data: data.facebook.star_rating[0],
                    borderColor: 'rgb(204, 0, 17)',
                    backgroundColor: 'rgb(204, 0, 17)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: 'Recommended',
                    data: data.facebook.star_rating[1],
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                }]
            },
            options: {
                borderJoinStyle: "bevel",
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Monthly review in Facebook."
                }
            }
        });

        // Google pie chart
        var myFacebookPieChart = new Chart(facebook_pie_ctx, {
          type: 'pie',
          data: {
              labels: data.facebook.curr_month.label,
              datasets: [
                  {
                    data: data.facebook.curr_month.total,
                    backgroundColor: [
                        'rgb(0, 51, 204)',
                        'rgb(204, 0, 17)'
                    ]
                }]
            },
            options: {
              title: {
                display: true,
                fontSize: 12,
                text: 'All reviews of this month'
              }
            }
        });
    },

    error: function(error_data) {
       console.log(error_data);
    }
  });
</script>

{% endblock content %}