{% extends 'multitenancy/admin/base.html' %}
{%load static %}
{% block page_title %}Home{% endblock page_title %}
{% block main_content %}

    {% include "multitenancy/admin/adminUser/includes/dashboard.html" %}

{% endblock main_content %}

{% block custom_js %}

    
     <!-- ChartJS -->
     <script src="{% static "plugins/chart.js/Chart.min.js" %}"></script>

<script>
  var activeDays = JSON.parse('{{ active_date|escapejs }}');
    var activeCount = JSON.parse('{{ active_count|escapejs }}');
    var inActiveCount = JSON.parse('{{ inactive_count|escapejs }}');
    $(document).ready(function(){
      
        var areaChartData = {
      labels  : activeDays,
      
      datasets: [
        {
          label               : 'Active Subscriptions',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : activeCount
        },
        {
          label               : 'Inactive Subscriptions',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : inActiveCount
        },
      ]
    }

    


        //-------------
        //- BAR CHART -
        //-------------
        var barChartCanvas = $('#barChart').get(0).getContext('2d')
        var barChartData = jQuery.extend(true, {}, areaChartData)
        var temp0 = areaChartData.datasets[0]
        var temp1 = areaChartData.datasets[1]
        barChartData.datasets[1] = temp1
        barChartData.datasets[0] = temp0
    
        var barChartOptions = {
          responsive              : true,
          maintainAspectRatio     : false,
          datasetFill             : false
        }
    
        var barChart = new Chart(barChartCanvas, {
          type: 'bar', 
          data: barChartData,
          options: barChartOptions
        })
    })


     // Get context with jQuery - using jQuery's .get() method.
    var pieData        = {
      labels: [
          'Chrome', 
          'IE',
          'FireFox', 
          'Safari', 
          'Opera', 
          'Navigator', 
      ],
      datasets: [
        {
          data: [700,500,400,600,300,100],
          backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
        }
      ]
    }
    

     //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
    var pieOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    var pieChart = new Chart(pieChartCanvas, {
      type: 'pie',
      data: pieData,
      options: pieOptions      
    })

      </script>

{% endblock custom_js %}
    