{% 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>200</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>-2.4%</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>200</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>-2.4%</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>200</td>
            </tr>
            <tr>
              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
              <td>-2.4%</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_pos_gr }}</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_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_pos_gr }}</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }};</td>
          {% endif %}
        </tr>
        <tr>
          <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_pos_gr }}</td>
          {% else %}
            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }};</td>
          {% endif %}
        </tr>
      </tbody>
    </table>
  </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [{
        data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#007bff',
        borderWidth: 4,
        pointBackgroundColor: '#007bff'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false,
      }
    }
  });
</script>
{% endblock %}