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


<!--cart-->
<div class="row">

  <div class="col-sm-6 col-md-4">
      <div class="card text-white bg-secondary mb-3">
      <div class="card-header"><h5 class="card-title">Google <span><i class="fa fa-google" aria-hidden="true"></i></span></h5></div>
        <div class="card-body">
          <table class="table">
            <tr>
              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
              <td>{{ google_total }}</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>{{ google_total_growth }} %</td>
            </tr>
          </table>
        </div>
      </div>
  </div>

  <div class="col-sm-6 col-md-4">
      <div class="card text-white bg-danger mb-3">
      <div class="card-header"><h5 class="card-title">Yelp <span><i class="fa fa-yelp" aria-hidden="true"></i></span></h5></div>
        <div class="card-body">
          <table class="table">
            <tr>
              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
              <td>{{ yelp_total }}</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>{{ yelp_total_growth }}%</td>
            </tr>
          </table>
        </div>
      </div>
  </div>

  <div class="col-sm-6 col-md-4">
      <div class="card text-white bg-primary mb-3">
      <div class="card-header"><h5 class="card-title">Facebook <span><i class="fa fa-facebook" aria-hidden="true"></i></span></h5></div>
        <div class="card-body">
          <table class="table">
            <tr>
              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
              <td>{{ facebook_total }}</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>{{ facebook_total_growth }} %</td>
            </tr>
          </table>
        </div>
      </div>
  </div>

</div>

<!--    canvas-->
  <canvas class="my-4" id="myChart" width="900" height="300"></canvas>

  <h2>Section title</h2>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr class="table-info">
          <th>Platform</th>
          <th>Total <br>Positive Review</th>
          <th>Positive <br> review Growth</th>
          <th>Total <br>Negative Review</th>
          <th>Negative <br> review Growth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Google</td>
          <td>{{ google_pos }}</td>
          {% if google_pos_gr > 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_pos_gr }} %</td>
          {% endif %}
          <td>{{ google_neg }}</td>
          {% if google_neg_gr < 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_neg_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_neg_gr }} %</td>
          {% endif %}
        </tr>
        <tr>
          <td>Yelp</td>
          <td>{{ yelp_pos }}</td>
          {% if yelp_pos_gr > 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }} %</td>
          {% endif %}
          <td>{{ yelp_neg }}</td>
          {% if yelp_neg_gr < 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_neg_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_neg_gr }} %</td>
          {% endif %}
        </tr>
        <tr style="border-bottom: 1px solid #dee2e6">
          <td>Facebook</td>
          <td>{{ facebook_pos }}</td>
          {% if facebook_pos_gr > 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }} %</td>
          {% endif %}
          <td>{{ facebook_neg }}</td>
          {% if facebook_neg_gr < 0 %}
            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_neg_gr }} %</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_neg_gr }} %</td>
          {% endif %}
        </tr>
      </tbody>
    </table>
  </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 location_id = document.getElementById("location_id").value;
  console.log(location_id.value)
  var endpoint = '/user/api/analytics';
  params = {
      "location_id":location_id.trim()
  }
  console.log(params)
  $.ajax({
        type: "get",
        url: endpoint,
        data: params,
        dataType: 'json',
        success: function(data) {
        console.log(data)
          var myBarChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.label,
              datasets: [
                  {
                    label: 'Google',
                    data: data.google,
                    borderColor: 'rgb(255, 204, 0)',
                    backgroundColor: 'rgb(255, 204, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: 'Facebook',
                    data: data.facebook,
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: 'Yelp',
                    data: data.yelp,
                    borderColor: 'rgb(204, 51, 0)',
                    backgroundColor: 'rgb(204, 51, 0)',
                    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."
                }
            }
        });
    },

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