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


{% block content %}
<div class="row">
  <div id="draggable" class="col m4 s12">
    <p class="flow-text">Сумма операций за 
    <form method="POST" style="display: inline-block; float:left;"> {% csrf_token %}
      <input type="hidden" name="selected_month" value= "{{ month|add:-1 }}">
      <input type="hidden" name="selected_year" value="{{ datedate.year }}"><nobr>
      <button type="submit" name="action" value="send" class="blue" style="margin: 6px 1px; color: white; width: 40px; height: 40px; float: left; ">
        <i class="material-icons">skip_previous</i>
      </button>
    </form>
    <span class="flow-text" style="display: inline-block; padding: 10px 5px;">   {{ datedate|date:"F Y"|lower}} </span><nobr>
    <form method="POST" style="display: inline-block;"> {% csrf_token %}
      <input type="hidden" name="selected_month" value= "{{ month|add:1 }}">
      <input type="hidden" name="selected_year" value="{{ datedate.year }}">
      <button type="submit" name="action" value="send" class="blue" style="display: block; float: left; margin: 6px 1px; color: white; width: 40px; height: 40px;">
        <i class="material-icons" style="display: block; float: rigth; padding: 1px;">skip_next</i>
      </button>
    </form> 

    <form method="POST"> {% csrf_token %}
      <input type="text" id="search" style="display: none">
      <p><select name="selected_month"><nobr> 
      <option selected value="{{ datedate|date:"m" }}">{{ datedate|date:"F" }}</option>
      <option value=""> </option>
      <option value = "1">Январь</option>
      <option value = "2">Февраль</option>
      <option value = "3">Март</option>
      <option value = "4">Апрель</option>
      <option value = "5">Май</option>
      <option value = "6">Июнь</option>
      <option value = "7">Июль</option>
      <option value = "8">Август</option>
      <option value = "9">Сентябрь</option>
      <option value = "10">Октябрь</option>
      <option value = "11">Ноябрь</option>
      <option value = "12">Декабрь</option>
      </select> <nobr>
<script>
//$("select").on('click', function(){$("#search").css("display", "block")})
</script>
    <select name="selected_year">
        <option selected value="{{ datedate|date:"Y" }}">{{ datedate|date:"Y" }}</option>
        <option value=""> </option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
        <option value="2015">2015</option>
    </select><nobr>
  </form>
  {{ mon_calendar|safe }}
</div>
<div class="col m4 s12 offset-m2">
  <table cellpadding=5 width=300 class="bordered">
    <tr>
      <th>Категория</th>
      <th>Сумма</th>
    </tr>
    {% for category in categories %}
      {% if category.sum_cat %}
        <tr> <td>{{ category.cat_name}}</td>
        <td>{{ category.sum_cat}}</td>
        <!--td>{{ category.avg }}  </td--> </tr>
      {% endif %}
    {% endfor %} 
  {% if sum_total %}
    <tr>
      <td  align="right">Total:</td>
      <td> {{ sum_total }} </td>
    </tr>
{% endif %}
</table>   <canvas id="canvas" width="360" height="360" style ="padding: 20px 0px;"></canvas> </div></div>

<!--script>
var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
var sum = 0;
for (var i=0; i < data.length; i++){sum += data[i]}
var r = 3.6;
var centerX = 180;
var centerY = 180;
var radius = 180;
var far = 108;
var start = (Math.PI/180)*0-Math.PI/2;
var colors = ['#5E35B1', '#43A047', '#E53935', '#1E88E5', '#D81B60', '#C0CA33', '#4e342e', '#00acc1', '#f9a825', '#546e7a', '#7b1fa2', '#689f38', '#ff6f00', '#6d4c41', '#3f51b5', '#00acc1'];
var canvas = document.getElementById('canvas');
var total = 0;
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'bevel';
	for (var i=0; i < data.length;i++) {
	ctx.beginPath();
	total += data[i]*100/sum;
        var end = (Math.PI/180)*r*total-Math.PI/2;
	ctx.arc(centerX,centerY,radius, start, end); 
	ctx.lineTo(centerX,centerY);
	ctx.fillStyle = colors[i];
	ctx.fill();
	ctx.stroke();
        ctx.fillStyle = "white"; 
        ctx.font = "10pt calibri";
        ctx.fillText(data_cat[i], centerX-15 + far * Math.cos((start + end) / 2), centerY + far * Math.sin((start + end) / 2));
	start = end+0.01;
	}
  ctx.beginPath();
  ctx.shadowBlur = 7;
  ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
  ctx.arc(centerX,centerY,radius, 0, 2*Math.PI);
  ctx.stroke();

  }

</script-->
<script>
var data = [{% for cat in categories %} {{ cat.sum_cat|escapejs }}, {% endfor %}];
var data_cat = [{% for cat in categories %} "{{ cat.cat_name|escapejs }}", {% endfor %}];
</script>
<script type="text/javascript" src="{% static 'js/diagram.js' %}"></script>
<script> console.log("t");
$(document).ready( function() {
$('form').on('change', function() {         
var $form = $(this);    
$.ajax({
      type: 'POST',
      data: $form.serialize(),
      success: function(response){$('html').html(response)}
      
      }).done(function() {
            console.log('success');
      }).fail(function() {
            console.log('fail');
      });
   });
}); </script>
{% endblock content %}