{% load sekizai_tags static i18n %}

{% addtoblock "css" %}
  <link href="{% static 'c3/c3.min.css' %}" rel="stylesheet" type="text/css">
{% endaddtoblock %}

<h3 class="mt-4">{% trans "Statistics on Voucher Usage" %}</h3>

<div class="card">
	<div class="card-header">
		<ul class="nav nav-tabs card-header-tabs" role="tablist">
			<li class="nav-item">
				<a class="nav-link active registrationVoucherButton" href="#" data-startDate="{{ limitMonthDates.12 }}" role="tab" data-toggle="tab">{% trans "Last 12 Months" %}</a>
			</li>
			<li class="nav-item">
				<a class="nav-link registrationVoucherButton" href="#" data-startDate="{{ limitMonthDates.1 }}" role="tab" data-toggle="tab">{% trans "Last Month" %}</a>
			</li>
			<li class="nav-item">
				<a class="nav-link registrationVoucherButton" href="#" role="tab" data-toggle="tab">{% trans "All Time" %}</a>
			</li>
		</ul>
	</div>	
	<div class="card-body row tab-content">

		<div class="col-md-6">
		    <h4 class="card-title">{% trans "Percentage of Registration Using Vouchers" %}</h4>
		    <div id="voucherFrequencyChart"></div>
		</div>
		<div class="col-md-6">
			<h4 class="card-title">{% trans "Most Popular Vouchers" %}</h4>
	    	<table class="table">
	      		<thead><tr><th>{% trans "Code" %}</th><th>{% trans "Description" %}</th><th>{% trans "Uses" %}</th></tr></thead>
	      		<tbody id="popularVouchersTable">
	      	    </tbody>
	        </table>
		</div>
    </div>
</div>

{% addtoblock "js" %}
  <script src="{% static 'd3/d3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
  <script src="{% static 'c3/c3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
$(document).ready(function() {

var startDate = '{{ limitMonthDates.12 }}';
var voucherFrequencyChart = null;

$.ajax({
  dataType: "json",
  url: '{% url "voucherFrequencyJSON" %}?startDate=' + startDate,
  success: function(jsonData) {
	var data = {};
	var counts = [];
	jsonData.forEach(function(e) {
	    counts.push(e.vouchers.toString());
	    data[e.vouchers] = e.count;
	});

	voucherFrequencyChart = c3.generate({
		bindto: '#voucherFrequencyChart',
	    data: {
	        json: [ data ],
	        type : 'pie',
	        keys: {
	        	value: counts,
	        }
	    }
	});
  }
});

$.ajax({
  dataType: "json",
  url: '{% url "popularVouchersJSON" %}?startDate=' + startDate,
  success: function(jsonData) {
  	var tableData = '';

  	jsonData.forEach(function(e) {
        tableData += '<tr><td>' + e.voucherId + '</td><td>' + e.name + '</td><td>' + e.counter + '</td></tr>';
  	});

  	$('#popularVouchersTable').append(tableData);
  }
});


$('.registrationVoucherButton').click(function(e) {
  var startDate = $(this).attr('data-startDate');

  $.ajax({
    dataType: "json",
    url: '{% url "voucherFrequencyJSON" %}?startDate=' + startDate,
    success: function(jsonData) {
	  	var data = {};
	  	var counts = [];
	  	jsonData.forEach(function(e) {
	  	    counts.push(e.vouchers.toString());
	  	    data[e.vouchers] = e.count;
	  	});
	  	voucherFrequencyChart.load({
		    data: {
		        json: [ data ],
		        type : 'pie',
		        keys: {
		        	value: counts,
		        }
		    }  		
	  	});
    }
  });

  $.ajax({
    dataType: "json",
    url: '{% url "popularVouchersJSON" %}?startDate=' + startDate,
    success: function(jsonData) {
    	$('#popularVouchersTable').html('');
    	var tableData = '';
  
    	jsonData.forEach(function(e) {
	        tableData += '<tr><td>' + e.voucherId + '</td><td>' + e.name + '</td><td>' + e.counter + '</td></tr>';
    	});
  
    	$('#popularVouchersTable').append(tableData);
    }
  });

  $('.registrationVoucherButton').removeClass('active');
  $(this).addClass('active');
  e.preventDefault();

});


});
</script>
{% endaddtoblock %}
