{% extends "new/adminLTE2_base.html" %}
{% load static %}
{% load humanize %}
{% block headMedia %}
	<!-- Morris chart -->
        <link rel="stylesheet" href="{% static 'new/morris.js-0.5.1/morris.css' %}">


{% endblock %}


{% block leftbar %}
	{% include "new/index-leftbar.html" %}
{% endblock %}

{% block dash-title %}

		<b>{{form.text.value|default:"Tablero"|capfirst}}</b>
		[{{form.startDate.value}}, {{form.endDate.value}}]

{% endblock %}

{% block dash %}
<div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="info-box bg-aqua">
			<span class="info-box-icon"><i class="fa fa-database"></i></span>
			<div class="info-box-content">
				<span class="info-box-text">Noticias</span>
				<span class="info-box-number">{{info.nNewsText}}</span>
		
				<div class="progress">
		                	<div class="progress-bar" style="width: {{info.news_percent}}%"></div>
				</div>
		                <span class="progress-description">
					<a href="{% url 'news-list'%}?{{ request.GET.urlencode }}">Ver Noticias</a>
		                </span>
			</div><!-- /.info-box-content -->
		</div>
	</div><!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-yellow">
                        <span class="info-box-icon"><i class="fa fa-rss"></i></span>
                        <div class="info-box-content">
                                <span class="info-box-text">Fuentes Escritas</span>
                                <span class="info-box-number">{{info.nPublishers}}</span>

                                <div class="progress">
                                        <div class="progress-bar" style="width: {{info.publishers_percent}}%"></div>
                                </div>
                                <span class="progress-description">
                                        <a href="{% url 'publishers-list'%}?{{ request.GET.urlencode }}">Ver Fuentes</a>
                                </span>
                        </div><!-- /.info-box-content -->
                </div>
        </div><!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-green">
                        <span class="info-box-icon"><i class="fa fa-comment-o"></i></span>
                        <div class="info-box-content">
                                <span class="info-box-text">Temas</span>
                                <span class="info-box-number">{{info.nTopics}}</span>

                                <div class="progress">
                                        <div class="progress-bar" style="width: 0%"></div>
                                </div>
                                <span class="progress-description">
        		                <a href="{% url 'publishers-list'%}?{{ request.GET.urlencode }}">Ver Fuentes</a>
                                </span>
                        </div><!-- /.info-box-content -->
                </div>
        </div><!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-red">
                        <span class="info-box-icon"><i class="fa fa-microphone"></i></span>
                        <div class="info-box-content">
                                <span class="info-box-text">Fuentes de Audio</span>
                                <span class="info-box-number">{{info.nAudio}}</span>

                                <div class="progress">
                                        <div class="progress-bar" style="width: 100%"></div>
                                </div>
                                <span class="progress-description">
		                        <a href="{% url 'audio'%}">Ver Lista</a>
                                </span>
                        </div><!-- /.info-box-content -->
                </div>
        </div><!-- /.col -->
        
</div>
<div class="row">
        <div class="col-lg-8">
                <div class="box box-danger">
                        <div class="box-header with-border">
                                <h3 class="box-title">Historico</h3>
                                <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
					<!-- <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> -->
                                </div>
                        </div>
                        <div class="box-body">
                                <div id="morris-area-chart"></div>
                        </div><!-- /.box-body -->
                </div>

	</div>
	<div class="col-lg-4">
		<div class="box box-danger">
			<div class="box-header with-border">
				<h3 class="box-title">Noticias por Medio</h3>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
				</div>
			</div>
			<div class="box-body">
				<div id="morris-donut-chart"></div>
			</div><!-- /.box-body -->
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
        <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script src="{% static 'new/morris.js-0.5.1/morris.min.js' %}"></script>
        <script src="{% static 'new/Datejs-master/build/date-es-MX.js' %}"></script>

        <script>


		new Morris.Donut({
			element: 'morris-donut-chart',
			data: [
			{% for d in donutChart %}
				{
					label: "{{d.label}}",
					url: "{{d.url|safe}}",
					value: "{{d.value}}"
				},
			{% endfor %}
			],
			resize: true
			}).on('click', function(i, row){
					console.log(1,row);
					document.location.href = "{% url 'news-list'%}?"+row.url;
						});

		 new Morris.Area({
	element: 'morris-area-chart',
	data: [
		{% for hh in histogram %}
		{
			date:"{{hh.date}}",
			{% for key,value in hh.data.items %}
				{{key}}:{{value}},
			{% endfor %}
		}{% if not forloop.last %},{% endif %}
		{% endfor %}
		],
			xkey: 'date',
			ykeys: [{% for l in histogramsLabels %}"{{l|safe}}",{% endfor %}],
			labels: [{% for l in histogramsLabels %}"{{l|safe}}",{% endfor %}],
			pointSize: 2,
			hideHover: 'auto',
			resize: true,
			fillOpacity: 0.5
		    }).on('click', function(i, row, label){
						endDate = new Date(row.date);
						endDate = (endDate.add(1).month()).toString('yyyy-MM-dd');
						var urlParams = new URLSearchParams(window.location.search);
						urlParams.set('startDate', row.date);
						urlParams.set('endDate', endDate);
						console.log(urlParams.get('startDate'));
						document.location.href = "{% url 'news-list'%}?"+urlParams.toString();



						});
    
	</script>

{% endblock %}

