{% extends 'layouts/base.html' %}

{% block title %} Dashboard {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/style.css">
{% endblock stylesheets %}

{% block content %}

<!-- Header -->
<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
        <div class="col-lg-6 col-7">
          <h6 class="h2 text-white d-inline-block mb-0">Default</h6>
          <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
              <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
              <li class="breadcrumb-item"><a href="#">Dashboards</a></li>
              <li class="breadcrumb-item active" aria-current="page">Default</li>
            </ol>
          </nav>
        </div>
        <div class="col-lg-6 col-5 text-right">
          <a href="#" class="btn btn-sm btn-neutral">New</a>
          <a href="#" class="btn btn-sm btn-neutral">Filters</a>
        </div>
      </div>
      <!-- Card stats -->
      <div class="row">
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">Cloud Name</h5>
                  <span class="h2 font-weight-bold mb-0">{{cloudName}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                    <i class="ni ni-active-40"></i>
                  </div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">Server Version</h5>
                  <span class="h2 font-weight-bold mb-0">2.5.5.0_3</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                    <i class="ni ni-chart-pie-35"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">Licence validity</h5>
                  <span class="h2 font-weight-bold mb-0">{{validity}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                    <i class="ni ni-money-coins"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
  </div>
</div>

<div>
  <div id="doughnut-chart-email-swatches" class="color-swatches">
    <span class="swatch _0"></span>
    <span class="swatch _0h"></span>
    <span class="swatch _1"></span>
    <span class="swatch _1h"></span>
  </div>
  
  <div id="bar-chart-email-swatches" class="color-swatches">
    <span class="swatch _0"></span>
    <span class="swatch _0h"></span>
  </div>

  <div class="tso-daily-digest content-section">
    <div class="brick brick-chart doughnut-chart" id="email-delivery-chart">
      <h4>User Devices</h4>
      <div class="chart">
        <canvas id="chart-area" width="250" height="250" class="doughnut"></canvas>
      </div>
      <div class="legend"></div>
    </div>
    <div class="brick brick-chart doughnut-chart" id="email-open-rate-chart">
      <h4>Full Backup Completion </h4>
      <div class="chart">
        <canvas id="chart-area" width="250" height="250" class="doughnut"></canvas>
      </div>
      <div class="legend"></div>
    </div>

    <div class="brick brick-chart bar-chart" id="click-through-breakdown-chart">
      <h4>Device Protection Scorecard</h4>
      <div class="chart">
        <canvas width="250" height="250" class="bar"></canvas>
      </div>
      <div class="legend"></div>
    </div>
  </div>
    
</div>
<div>
  {% include "includes/footer.html" %}

</div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
<script>
  // https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript
// https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js
this.getSwatchColors = function(id, colors) {
  colors = colors || {};
  $("#" + id + " .swatch").each(function(i, el) {
    colors[el.className.split(" ").pop()] = $(el).css("background-color");
  });
  return colors;
};

this.createDoughnutChart = function(id, style, data) {
  var $chartArea = $("#" + id),
    chart = $chartArea.find('canvas.doughnut').get(0),
    ctx = chart.getContext("2d"),
    colors = getSwatchColors(style, {}),
    legend = "";
  _.each(data, function(el, i) {
    el.color = colors["_" + i];
    el.highlight = colors["_" + i + "h"];
    legend += [
      '<div class="entry">',
      '<span class="swatch" style="background-color:' + el.color + '"></span>',
      el.label,
      '</div>'
    ].join("");
  });

  var myDoughnut = new Chart(ctx).Doughnut(data, {
    animateRotate: false,
    animateScale: true,
    responsive: true,
    maintainAspectRatio: true,
    segmentStrokeWidth: 1,
    animationEasing: "easeOutCubic",
    animationSteps: 50,
    percentageInnerCutout: 50
  });
  $chartArea.find(".legend").append(legend);
  return myDoughnut;
};

this.createBarChart = function(id, style, data) {
  var $chartArea = $("#" + id),
    chart = $chartArea.find('canvas.bar').get(0),
    ctx = chart.getContext("2d"),
    colors = getSwatchColors(style),
    legend = "";
  _.each(data.datasets, function(el, i) {
    el.fillColor = colors["_" + i];
    el.highlight = colors["_" + i + "h"];
  });
  var myBar = new Chart(ctx).Bar(data, {
    scaleGridLineWidth: 1,
    scaleFontSize: 10,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
    scaleBeginAtZero: true,
    maintainAspectRatio: false
  });
  //$chartArea.find(".legend").append(legend);
};
$(function() {
  usersWithoutDevice = 15;
  usersWithDevice = 10;
  console.log(usersWithoutDevice)
  console.log(usersWithDevice)
  createDoughnutChart("email-delivery-chart", "doughnut-chart-email-swatches", [{
    value: usersWithoutDevice,
    label: "Users Without Devices"
  }, {
    value: usersWithDevice,
    label: "Users With Devices"
  }]);

  // console.log(datas[2]);
  createDoughnutChart("email-open-rate-chart", "doughnut-chart-email-swatches", [{
    value: 5,
    label: "Full Backup Completed"
  }, {
    value: 10,
    label: "Full Backup Not Completed"
  }]);

  createDoughnutChart("email-click-through-chart", "doughnut-chart-email-swatches", [{
    value: 41,
    label: "Click through"
  }, {
    value: 163,
    label: "Viewed only"
  }]);

  createBarChart("click-through-breakdown-chart", "bar-chart-email-swatches", {
    labels: ["Direct", "Redirected"],
    datasets: [{
      data: [28, 72]
    }]
  });

  createBarChart("repeat-open-rate-chart", "bar-chart-email-swatches", {
    labels: ["Day 1", "Day 2", "Day 3", "Day 4"],
    datasets: [{
      data: [2300, 1300, 480, 94]
    }]
  });
});
</script>

{% endblock javascripts %}