{% extends 'themes/'~layout_dir~'/layout.html' %}
{% block body %}

<div class="row">
	{% set colors_list = ["purple","red","orange","green","blue","grey","brown","magenta","forestgreen"] %}

	
	{% for chart in chart_data %}
	<div class="col s12 m6 l6 " style="    margin-bottom: 20px;">
		<div class="table-title-dash" style="cursor: pointer" onclick="gotoPage('{{app.config.base_url}}/{{app.modules[chart["module"]].route.route}}')">
                        <h6><i class="material-icons tiny">{{app.modules[chart["module"]].icon}}</i> {{app.modules[chart["module"]].route.label|trans}}</h6>
             </div>

             <div class="chart-card " style="background:#fff;cursor: pointer" {% if chart["chart_type"] != "list" %} onclick="gotoPage('{{app.config.base_url}}/{{app.modules[chart["module"]].route.route}}')"{% endif %}>
			

			{% if chart["chart_type"] != "count" and chart["chart_type"] != "list" %}				
				<canvas id='{{chart["chart_id"]}}'></canvas>
			{% elseif chart["chart_type"] == "list" %}
					{% if chart["data"]|length>0 %}
						<table class="data.table striped">
							<thead>
							{% for tbl_field in chart["fields"] %}
								{% if tbl_field!="id" %}
								<th>{{tbl_field|trans}}</th>
								{% endif %}
							{% endfor %}
							</thead>
							<tbody>
							{% for chart_rec in chart["data"] %}								
								<tr  onclick="gotoPage('{{app.config.base_url}}/{{app.modules[chart["module"]].route.route}}/{{chart_rec.id}}/')">
									{% for tbl_field in chart["fields"] %}
									{% if tbl_field!="id" %}
									<td>{{chart_rec[tbl_field]}}</td>
									{% endif %}
									{% endfor %}									
								</tr>
							{% endfor %}
							</tbody>
						</table>
					{% else %}
						<h4>{{"No Data"|trans}}</h4>
					{% endif %}		
			{% else %}
				
				{% if chart["group_field"]!="none" %}
					{% if chart["data"]["labels"]|length>0 %}
						<table class="data.table striped">
						{% for chart_group in chart["data"]["labels"] %}
							<tr><td>{{chart_group | trans}}: <span class="new badge {{themebasiccolor}}">{{chart["data"]["values"][loop.index-1]}} </span> </td></tr>
						{% endfor %}
						</table>
					{% else %}
						<h4>{{"No Data"|trans}}</h4>
					{% endif %}				
				{% else %}
					<a class="waves-effect waves-light btn {{themebasiccolor}}">{{chart["data"]}} {{app.modules[chart["module"]].route.label|trans}}</a>
				{% endif %}
				
			{% endif %}
		</div>
	</div>
	{% endfor %}
	
</div>
<div class="row">	
	{% if app.config.twitter_widget_enabled and app.config.twitter_page_url!="" %}	
	<div class="col s12 m6 " style="    margin-bottom: 20px;">
			<div class="table-title-dash">
                <h6>Latest Tweets</h6>
             </div>
             <div class="chart-card " style="background:#fff;cursor: pointer;  height: 400px" >			
				<a class="twitter-timeline"  data-tweet-limit="10" href="https://twitter.com/{{app.config.twitter_page_url}}">Our Latest Tweets</a> 
				<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
             </div>
	</div>
	{% endif %}
	
	{% if app.config.facebook_widget_enabled and app.config.facebook_page_url!="" %}	
	<div class="col s12 m6 " style="margin-bottom: 20px;">
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = 'https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.10';
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>
			<div class="table-title-dash">
                <h6>Facebook Posts</h6>
            </div>
            <div class="chart-card " style="background:#fff;cursor: pointer; height: 400px" >			
				<div class="fb-page" data-href="https://www.facebook.com/{{app.config.facebook_page_url}}" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-width="1000" data-height="350" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/{{app.config.facebook_page_url}}" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/{{app.config.facebook_page_url}}">Facebook Posts</a></blockquote></div>
            </div>
	</div>
	{% endif %}
</div>
	
{% endblock %}
{% block footerscripts %}
<script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/datatable.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>


{% set chart_labels = [] %}

{% for chart in chart_data %}

{% set chart_labels_t = [] %}

{% if chart["data"]["labels"] is defined %}
{% for label in chart["data"]["labels"] %}
	{% set chart_labels_t = chart_labels_t|merge([label|trans]) %}
{% endfor %}
{% endif %}

{% set chart_labels = chart_labels|merge([chart_labels_t]) %}

{% endfor %}


<script>


var chart_data = {{chart_data|json_encode()|raw}};
var chart_labels = {{chart_labels|json_encode()|raw}};
console.log(chart_labels);


for(var ci=0; ci < chart_data.length; ci++){
	console.log(chart_data[ci]);
	
	var backgroundColors = [
		'rgba(255,99,132, 0.8)',
		'rgba(54, 162, 235, 0.8)',
		'rgba(255, 206, 86, 0.8)',
		'rgba(75, 192, 192, 0.8)',
		'rgba(153, 102, 255, 0.8)',
		'rgba(255, 159, 64, 0.8)'
	];
	
	var backgroundColorsHover = [
		'rgba(255,99,132,1)',
		'rgba(54, 162, 235, 1)',
		'rgba(255, 206, 86, 1)',
		'rgba(75, 192, 192, 1)',
		'rgba(153, 102, 255, 1)',
		'rgba(255, 159, 64, 1)'
	];
	
	if(chart_data[ci]["chart_type"]=="bar"){
		
		var ctx = document.getElementById(chart_data[ci]["chart_id"]);
		var myChart = new Chart(ctx, {
		    type: 'bar',
		    data: {
		        labels: chart_labels[ci],
		        datasets: [{
		            label: "Count",
		            data: chart_data[ci]["data"]["values"],
		            backgroundColor: backgroundColors,
		            hoverBackgroundColor: backgroundColorsHover,
		            borderColor: backgroundColorsHover,
		            borderWidth: 1
		        }]
		    },
		    options: {
			    legend: {
		            display: false,
		        },
		        scales: {
		            yAxes: [{
		                ticks: {
		                    beginAtZero:true
		                }
		            }]
		        }
		    }
		});	
	
	}	
	
	if(chart_data[ci]["chart_type"]=="doughnut"){
			
		var ct2 = document.getElementById(chart_data[ci]["chart_id"]);
		
		var data2 = {
		    labels: chart_data[ci]["data"]["labels"],
		    datasets: [
		        {
		            data: chart_data[ci]["data"]["values"],
		            backgroundColor: backgroundColors,
		            hoverBackgroundColor: backgroundColorsHover,
		        }]
		};
		
		var myDoughnutChart = new Chart(ct2, {
		    type: 'doughnut',
		    data: data2,
		    options: {
		        animation:{
		            animateScale:true
		        }
		    }
		});	
	
	}
	
	if(chart_data[ci]["chart_type"]=="count"){
		
	}

}
	
</script>
{% endblock %}