{% extends 'base/base.html' %}
{% load staticfiles %}


{% block scripts %}
  <!-- Provides random colors for the charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <!-- Makes a get request using Ajax to the django rest api retrieving data -->
<script>
    var data = 'chart/data'
    var labels1 = [];
    var data1 = []
    $.ajax({
      method: "GET",
      url: data,
      success: function(chartdata){
        labels1 = chartdata.Countries
        data1 = chartdata.Count
        labels2 = chartdata.Hotels
        data2 = chartdata.Bookings
        data3 = chartdata.Money
        var ctx = document.getElementById("myChart");
        var ctx2 = document.getElementById("myChart2");
        var ctx4 = document.getElementById("myChart4").getContext("2d");

        // A bar chart that shows the number of hotels a partner has in each country
        var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: labels1,
              datasets: [{
                    label: 'Hotels per country',
                    data: data1,
                    backgroundColor: randomColor({
                                                   count: labels2.length,
                                                   hue: 'orange'
                                                }),
                    borderColor: [
                        '#f7f6f4','#f7f6f4'],
                    borderWidth: 3
                }]
               },
                 options: {
                           scales:
                           {
                              yAxes:
                               [{ ticks:
                                   {
                                       beginAtZero:true }
                               }]
                            }
                          }
            });


        // A bar chart that show the bookings that each hotel is recieving
        var myChart2 = new Chart(ctx2, {
             type: 'bar',
             data: {
                 labels: labels2,
                 datasets: [{
                       label: 'Bookings Per Hotel',
                       data: data2,
                       backgroundColor: randomColor({
                                                      count: labels2.length,
                                                      hue: 'blue'
                                                   }),

                   }]
                  },
                  options: {
                            scales:
                            {
                               yAxes:
                                [{ ticks:
                                    {
                                        beginAtZero:true }
                                }]
                             }
                           }
              });

              // A bar chart that shows the yearly income for each hotel the partner owns
              var myChart4 = new Chart(ctx4, {
                type: 'polarArea',
                data: {
                    labels: labels2,
                    datasets: [{

                          data: data3,

                          backgroundColor: randomColor({
                                                         count: labels2.length,
                                                         hue: 'red'
                                                      }),

                          borderColor:randomColor({
                                                         count: labels2.length,
                                                         hue: 'red'
                                                      }),
                          borderWidth: 2,
                          label: 'Yearly Earnings $'
                        }]
                       },
                       options: {
                                 scales:
                                 {
                                    yAxes:
                                     [{ ticks:
                                         {
                                             beginAtZero:true }
                                     }]
                                  }
                                }
                              })

        }
      })



</script>

{% endblock%}

{% block content %}
<!-- The comparison graphs are displayed here -->
<div class="row">
    <a href="{% url 'ManageHotels:home' %}" class="btn pull-right">Back</a>
  <div class="col-md-6 col-md-offset-3">

      <hr>
      <h4 class="text-center">The number of hotels grouped by country</h4>
      <canvas id="myChart" width="400" height="400"></canvas>

  <hr>
      <h4 class="text-center">Number of bookings per Hotel</h4>
      <canvas id="myChart2" width="400" height="400"></canvas>

  <hr />

      <h4 class="text-center">Yearly earnings from each hotel</h4>
      <canvas id="myChart4" width="400" height="400"></canvas>
  </div>
  <hr />




</div>



{% endblock %}