{% extends "::layout.html.twig" %}

{% block title %}{% trans %}Statistiques de l'affichage{% endtrans %} "{{ event.name }}" - {{ parent() }}{% endblock %}

{% block content_main %}

<div class="row">
    <div class="col-md-12">
        <div class="wrapper-title row">
            <h1 class="title col-md-12">{% trans %}Statistiques de l'affichage{% endtrans %} <strong>{{ event.name }}</strong></h1>
            <div class="dates col-md-12">
				<p>{% trans %}Du{% endtrans %} 
				<strong>{{ event.startDate | date('d M Y') }}</strong>
				{% trans %}au{% endtrans %}
				<strong>{{ event.endDate | date('d M Y') }}</strong></p>
			</div>
            <div class="group-button col-md-12">
                <a href="{{ path('event_view', { 'publicToken' : event.publicToken }) }}" class="btn" target="_blank">{% trans %}Voir{% endtrans %}</a>

                <a href="{{ path('event_edit', { 'event' : event.id }) }}" class="btn">{% trans %}Editer{% endtrans %}</a>

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                    <a href="{{ path('event_moderate', { 'event' : event.id }) }}" class="btn">{% trans %}Modérer{% endtrans %}</a>
                {% else %}
                    <a href="{{ path('event_view_contents', { 'event' : event.id }) }}" class="btn">{% trans %}Contenus{% endtrans %}</a>
                {% endif %}

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                    <a href="{{ path('event_moderate', { 'event' : event.id }) }}" class="btn">{% trans %}Corbeille{% endtrans %}</a>
                {% endif %}

                <a href="{{ path('event_stats', { 'event' : event.id }) }}" class="btn" >{% trans %}Stats{% endtrans %}</a>
                
                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                	{% if event.type == 'retail-cast' %}
                		<a href="{{ path('event_storyboard', { 'event' : event.id }) }}" class="btn" >{% trans %}Playlist{% endtrans %}</a>
                	{% endif %}
					{% if event.type == 'retail-cast' or event.id == 704 %}
						<a href="{{ path('event_media', { 'event' : event.id }) }}" class="btn" >{% trans %}Médiathèque{% endtrans %}</a>
                	{% endif %}
                {% endif %}
            </div>
        </div>
    </div>
</div>

{{ form_start( statsSettingsForm, { 'method': 'POST' } ) }}
	{{ form_widget( statsSettingsForm._token ) }}
	<div class="settings">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><a data-toggle="collapse" href="#collapseSettings" aria-expanded="true" aria-controls="collapseSettings">{% trans %}Sélection de Dates / Sources / Hashtags{% endtrans %}</a></h3>
			</div>
			<div id="collapseSettings" class="panel-collapse collapse in" role="tabpanel">
				<div class="panel-body row">
					<div class="col-md-4">
						<p>{% trans %}Dates{% endtrans %}</p>
						{{ form_row( statsSettingsForm.startDate ) }}
						{{ form_row( statsSettingsForm.endDate ) }}
					</div>
					<div class="col-md-4 sources">
						<p>{% trans %}Sources{% endtrans %}</p>
						{{ form_row( statsSettingsForm.sources ) }}
					</div>
					<div class="col-md-4 hashtags">
						<p>{% trans %}Hashtags{% endtrans %}</p>
						{{ form_row( statsSettingsForm.hashtags ) }}

						<div class="form-group submit">
							<button type="submit" class="btn btn-primary btn-plus">{% trans %}Actualiser les stats{% endtrans %}<i class="glyphicon glyphicon-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ form_end( statsSettingsForm ) }}

<div class="badges">
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h3 class="panel-title"><a data-toggle="collapse" href="#collapseStats" aria-expanded="true" aria-controls="collapseStats">{% trans %}Statistiques de l'affichage{% endtrans %}</a></h3>
	    </div>
	    <div id="collapseStats" class="panel-collapse collapse in" role="tabpanel">
			<div class="panel-body">
				<div class="row">
					<div class="col-md-3">
						<div class="nb-posts">
							<p>{% trans %}Nombre de posts{% endtrans %}</p>
							<div class="badge-big {% if nbPosts > 999999 %}smaller-text{% endif %}">{{ nbPosts | number_format( 0, ',', ' ' ) }}</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="nb-users">
							<p>{% trans %}Nombre d'utilisateurs{% endtrans %}</p>
							<div class="badge-big {% if nbUsers > 999999 %}smaller-text{% endif %}">{{ nbUsers | number_format( 0, ',', ' ' ) }}</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="nb-reach">
							<p>{% trans %}Reach <span class="asterisk-title"><sup>(*)</sup></span>{% endtrans %}</p>
							<div class="badge-big {% if nbReach > 999999 %}smaller-text{% endif %}">{{ nbReach | number_format( 0, ',', ' ' ) }}</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="nb-engagement">
							<p>{% trans %}Engagement <span class="asterisk-title"><sup>(*)</sup></span>{% endtrans %}</p>
							<div class="badge-big {% if nbEngagement > 999999 %}smaller-text{% endif %}">{{ nbEngagement | number_format( 0, ',', ' ' ) }}</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-offset-6 col-md-6 reach-engagement-info">
						{% if event.fetchStats == true %}
							<div class="alert alert-warning" role="alert">
								{% trans %}Les statistiques  de reach et d'engagement sont en cours de récupération,<br> les résultats ne sont donc pas définitifs.{% endtrans %} <a href="javascript:location.reload();">{% trans %}Rafraîchir la page{% endtrans %}</a> 
							</div>
						{% endif %}
						<div class="last-update">Dernière mise à jour : {% if event.statsLastUpdate %}{{ event.statsLastUpdate | date('d/m/Y H:i:s') }}{% else %}Aucune{% endif %}</div>
						<div class="asterisk">(*) Statistiques de reach et d'engagement valables uniquement pour le réseau social Twitter</div>
					</div>
				</div>
				{% if topTwitter is not null or topInstagram is not null %}
				<hr />
				<div class="row influence">
					{% if topTwitter is not null %}
						<div class="col-md-6">
							<p>{% trans %}Top influenceur Twitter{% endtrans %}</p>
							<p>
								<a href="http://twitter.com/{{ topTwitter.screen_name }}" target="_blank">
									<img src="{{ topTwitter.profile_image_url }}" width="50">
								</a>
							</p>	
							<h5>
								<a href="http://twitter.com/{{ topTwitter.screen_name }}" target="_blank" >{{ topTwitter.name }}</a>
								<br />@{{ topTwitter.screen_name }}
							</h5>
						</div>
					{% endif %}

					{% if topInstagram is not null %}
						<div class="col-md-6">
							<p>{% trans %}Top influenceur Instagram{% endtrans %}</p>
							<p>
								<a href="http://instagram.com/{{ topInstagram.username }}" target="_blank">
									<img src="{{ topInstagram.profile_picture }}" width="50">
								</a>
							</p>	
							<h5>
								<a href="http://instagram.com/{{ topInstagram.username }}" target="_blank" >{{ topInstagram.full_name }}</a>
								<br />@{{ topInstagram.username }}
							</h5>
						</div>
					{% endif %}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

<div class="pies">
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h3 class="panel-title"><a data-toggle="collapse" href="#collapsePie" aria-expanded="true" aria-controls="collapsePie">{% trans %}Répartition des posts{% endtrans %}</a></h3>
	    </div>
	    <div id="collapsePie" class="panel-collapse collapse in" role="tabpanel">
	        <div class="panel-body row">
	        	<div class="col-md-6">
					<p>{% trans %}Par source{% endtrans %}</p>
					<div id="pie-chart-source" class="pie-chart"></div>
				</div>
				<div class="col-md-6">
					<p>{% trans %}Par type{% endtrans %}</p>
					<div id="pie-chart-type" class="pie-chart"></div>
				</div>
	        </div>
	    </div>
	</div>
</div>

<div class="timeline">
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h3 class="panel-title"><a data-toggle="collapse" href="#collapseTimeline" aria-expanded="true" aria-controls="collapseTimeline">{% trans %}Posts pris durant l'affichage par plage horaire{% endtrans %}</a></h3>
	    </div>
	    <div id="collapseTimeline" class="panel-collapse collapse in" role="tabpanel">
	        <div class="panel-body row">
	        	<div class="col-md-12">
					<div id="pie-chart-timeline" class="pie-chart"></div>
				</div>
	        </div>
	    </div>
	</div>	
</div>

<div class="row content map-hashtags-list">
	<div class="col-md-6 map">
		<div class="panel panel-default">
		    <div class="panel-heading">
		        <h3 class="panel-title"><a data-toggle="collapse" href="#collapseLocalisation" aria-expanded="true" aria-controls="collapseLocalisation">{% trans %}Localisation{% endtrans %}</a></h3>
		    </div>
		    <div id="collapseLocalisation" class="panel-collapse collapse in" role="tabpanel">
		        <div class="panel-body">
		        	<div id="map-chart"></div>
		        </div>
		    </div>
		</div>
	</div>
	<div class="col-md-6 hashtags-list">
		<div class="panel panel-default">
		    <div class="panel-heading">
		        <h3 class="panel-title"><a data-toggle="collapse" href="#collapseTags" aria-expanded="true" aria-controls="collapseTags">{% trans %}Tags utilisés{% endtrans %}</a></h3>
		    </div>
		    <div id="collapseTags" class="panel-collapse collapse in" role="tabpanel">
		        <div class="panel-body">
		        	{% for key in userHashtags|keys %}
				    	<span class="label label-big label-primary">#{{ key }} ({{ userHashtags[key] }})</span>
				    {% endfor %}
		        </div>
		    </div>
		</div>
	</div>
</div>
<hr />

<div class="influence" id="influence">
		
	<div class="row">
		<div class="col-md-12">
    		{% if event.fetchStats == true %}
				<div class="alert alert-warning" role="alert">{% trans %}Les statistiques ci-dessous sont en cours de récupération, les résultats ne sont donc pas définitifs.{% endtrans %} <a href="javascript:location.reload();">{% trans %}Rafraîchir la page{% endtrans %}</a></div>
			{% endif %}
    	</div>
	</div>

	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h3 class="panel-title"><a data-toggle="collapse" href="#collapseInfluence" aria-expanded="true" aria-controls="collapseInfluence">{% trans %}Classement des influenceurs{% endtrans %}</a></h3>
	    </div>
	    <div id="collapseInfluence" class="panel-collapse collapse in" role="tabpanel">
	        <div class="panel-body row">
				<div class="toolbar-high">
					{% if event.fetchStats == false %}
						<div class="col-md-3">
							<p><a href="{{ path('event_update_stats', { 'event' : event.id }) }}" class="btn btn-primary btn-plus">{% trans %}Actualiser les stats{% endtrans %}<i class="glyphicon glyphicon-refresh"></i></a></p>
						</div>
					{% endif %}
					<div class="clearfix"></div>
				</div>
				<div class="col-md-12">
					<div class="table-responsive">
						<table class="table table-striped" data-pagination="true" data-search="true" data-toggle="table" data-sort-name="posts" data-sort-order="desc" >
							<thead>
								<tr>
									<th data-field="name" data-valign="middle" >{% trans %}Nom de l'utilisateur{% endtrans %}</th>
									<th data-field="posts" data-valign="middle" data-sortable="true">{% trans %}Nombre de posts{% endtrans %}</th>
									<th data-field="outreach" data-valign="middle" data-sortable="true">{% trans %}Reach{% endtrans %}</th>
									<th data-field="engagement" data-valign="middle" data-sortable="true">{% trans %}Engagement{% endtrans %}</th>
									<th data-field="source" data-valign="middle" data-sortable="true">{% trans %}Source{% endtrans %}</th>
								</tr>
							</thead>
							<tbody>
								{% for key,stat in sortedStatsData %}
								<tr>
								  	<td class="user">
								  		<img class="pic-stat" src="{{ stat.url }}" height="50" />
								  		<a href="{{ path('event_content', { 'event' : event.id, 'authorId' : key }) }}">{{ stat.name }}</a>
								  		{% if stat.source == 'Twitter' %}
								  			&nbsp;<a class="twitter-follow-button" href="https://twitter.com/{{ stat.name }}" data-show-count="false" data-lang="fr" target="_blank"> Follow @{{ stat.name }} </a>
								  		{% endif %}
								  		{% if stat.source == 'Instagram' %}
								  			&nbsp;<a href="http://instagram.com/{{ stat.name }}?ref=badge" class="ig-b- ig-b-v-24" target="_blank"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>
								  		{% endif %}
								  	</td>
								  	<td >{{ stat.nbPosts }}</td>
								  	<td >{{ stat.outreach }}</td>
								  	<td >{{ stat.engagement }}</td>
								  	<td >{{ stat.source }}</td>
								</tr>
								{% else %}
								<tr>
									<td colspan="5">{% trans %}Aucune donnée pour le moment{% endtrans %}</td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
						<div class="last-update">Dernière mise à jour : {% if event.statsLastUpdate %}{{ event.statsLastUpdate | date('d/m/Y H:i:s') }}{% else %}Aucune{% endif %}</div>
					</div>
				</div>
	        </div>
	    </div>
	</div>

</div>


<script type="text/javascript">
	window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>

<script type="text/javascript">
    AmCharts.theme = AmCharts.themes.light;

    var chartSource;
    var chartSourceData = {{ jsonPostsSource | raw }};
    
	var chartType;
    var chartTypeData = {{ jsonPostsType | raw }};

    AmCharts.ready(function () {
        
        chartSource = new AmCharts.AmPieChart();
        chartSource.dataProvider = chartSourceData;
        chartSource.titleField = "source";
        chartSource.valueField = "nbPosts";
        chartSource.sequencedAnimation = false;
        chartSource.innerRadius = "65%";
        chartSource.startDuration = 0;
        chartSource.labelRadius = 15;
        chartSource.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
        chartSource.creditsPosition = "bottom-left";
        chartSource.colors = [
			"#00cfcb",
			"#7fd0e0",
			"#007e7f",
			"#cccccc",
			"#364c4c"
		];
		chartSource.pathToImages = "{{ asset('assets_backend/js/amcharts/images/') }}";
		chartSource.amExport = {
			top		: 0,
			right		: 0,
			exportPNG	: true,
			exportPDF	: true,
			imageFileName : "graph-sources"
		};
        chartSource.write("pie-chart-source");

        chartType = new AmCharts.AmPieChart();
		chartType.dataProvider = chartTypeData;
        chartType.titleField = "type";
        chartType.valueField = "nbPosts";
        chartType.sequencedAnimation = false;
        chartType.innerRadius = "65%";
        chartType.startDuration = 0;
        chartType.labelRadius = 15;
        chartType.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
        chartType.creditsPosition = "bottom-left";
        chartType.colors = [
			"#00cfcb",
			"#7fd0e0",
			"#007e7f",
			"#cccccc",
			"#364c4c"
		];
		chartType.pathToImages = "{{ asset('assets_backend/js/amcharts/images/') }}";
		chartType.amExport = {
			top		: 0,
			right		: 0,
			exportPNG	: true,
			exportPDF	: true,
			imageFileName : "graph-type-contenus"
		};
        chartType.write("pie-chart-type");
        
    });
</script>

<script type="text/javascript">
	
	var chartTimeline;
	var chartTimelineData = {{ jsonPostsTimeline | raw }};
	var chartCursor;

	AmCharts.ready(function () {

	    // SERIAL CHART
	    chartTimeline = new AmCharts.AmSerialChart();
	    chartTimeline.pathToImages = "{{ asset('assets_backend/js/amcharts/images/') }}";
	    chartTimeline.dataProvider = chartTimelineData; 
	    chartTimeline.categoryField = "date";
	    chartTimeline.dataDateFormat = "YYYY-MM-DD HH:NN";
	    chartTimeline.balloon.bulletSize = 5;
		chartTimeline.amExport = {
			top		: 0,
			right		: -40,
			exportPNG	: true,
			exportPDF	: true,
			imageFileName : "graph-timeline"
		};

	    // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
	    chartTimeline.addListener("dataUpdated", zoomChart);

	    // AXES
	    // category
	    var categoryAxis = chartTimeline.categoryAxis;
	    categoryAxis.parseDates = true;
	    categoryAxis.minPeriod =  "hh";
	    categoryAxis.equalSpacing =  true;
	    categoryAxis.dashLength = 1;
	    categoryAxis.minorGridEnabled = true;
	    categoryAxis.twoLineMode = true;
	    categoryAxis.axisColor = "#DADADA";
		
	    // value
	    var valueAxis = new AmCharts.ValueAxis();
	    valueAxis.axisAlpha = 0;
	    valueAxis.integersOnly = true;
	    valueAxis.dashLength = 1;
	    chartTimeline.addValueAxis(valueAxis);

	    // GRAPH
	    var graph = new AmCharts.AmGraph();
	    graph.valueField = "nbPosts";
	    graph.bullet = "round";
	    graph.connect = false;
	    graph.bulletBorderColor = "#FFFFFF";
	    graph.bulletBorderThickness = 2;
	    graph.bulletBorderAlpha = 1;
	    graph.lineThickness = 2;
	    graph.lineColor = "#00cfcb";
	    graph.negativeLineColor = "#00cfcb";
	    graph.hideBulletsCount = 500;
	    chartTimeline.addGraph(graph);

	    // CURSOR
	    chartCursor = new AmCharts.ChartCursor();
	    chartCursor.cursorPosition = "mouse";
	    chartCursor.pan = true; // set it to false if you want the cursor to work in "select" mode
	    chartTimeline.addChartCursor(chartCursor);

	    // SCROLLBAR
	    var chartScrollbar = new AmCharts.ChartScrollbar();
	    chartTimeline.addChartScrollbar(chartScrollbar);
	    chartTimeline.creditsPosition = "bottom-left";

	    // WRITE
	    chartTimeline.write("pie-chart-timeline");
	});
	

	// this method is called when chart is first inited as we listen for "dataUpdated" event
	function zoomChart() {
	    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
	    chartTimeline.zoomToIndexes(chartTimelineData.length - 40, chartTimelineData.length - 1);
	}

	function setPanSelect() {
	    if (document.getElementById("rb1").checked) {
	        chartCursor.pan = false;
	        chartCursor.zoomable = true;
	    } else {
	        chartCursor.pan = true;
	    }
	    chartTimeline.validateNow();
	}
</script>

<script type="text/javascript">
	var map = AmCharts.makeChart("map-chart", {
	    type: "map",
	    theme: "none",

	    imagesSettings: {
	        rollOverColor: "#00cfcb",
	        rollOverScale: 3,
	        selectedScale: 3,
	        color: "#000000"
	    },

	    areasSettings: {
	        autoZoom: true,
	        selectedColor: "#00cfcb",
	        color: "#CCCCCC",
	        rollOverColor:"#CCCCCC"
	    },

	    dataProvider: {
	        map: "worldHigh",
	        getAreasFromMap: true,
	        images: {{ jsonCoordinates | raw }}
	    },

	    zoomControl:{
	    	buttonFillColor:"#00cfcb",
	    	buttonRollOverColor:"#00cfcb"
	    },

	    pathToImages: "{{ asset('assets_backend/js/ammap/images/') }}",
	    amExport: {
			top: 21,
			right: 20,
			exportPNG: true,
			exportPDF: true,
			imageFileName : "graph-map"
		},
	});

</script>

{% endblock %}